fix: ancestor header not updating

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

docker-compose.yml

@@ -66,6 +66,7 @@ services:
   # The service that spins up all 3 services at once in one container
   hoppscotch-aio:
     container_name: hoppscotch-aio
+    restart: unless-stopped
     build:
       dockerfile: prod.Dockerfile
       context: .

packages/dioc/.gitignore

@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

packages/dioc/README.md

@@ -1,141 +0,0 @@
-# dioc
-
-A small and lightweight dependency injection / inversion of control system.
-
-### About
-
-`dioc` is a really simple **DI/IOC** system where you write services (which are singletons per container) that can depend on each other and emit events that can be listened upon.
-
-### Demo
-
-```ts
-import { Service, Container } from "dioc"
-
-// Here is a simple service, which you can define by extending the Service class
-// and providing an ID static field (of type string)
-export class PersistenceService extends Service {
-  // This should be unique for each container
-  public static ID = "PERSISTENCE_SERVICE"
-
-  public read(key: string): string | undefined {
-    // ...
-  }
-
-  public write(key: string, value: string) {
-    // ...
-  }
-}
-
-type TodoServiceEvent =
-  | { type: "TODO_CREATED"; index: number }
-  | { type: "TODO_DELETED"; index: number }
-
-// Services have a built in event system
-// Define the generic argument to say what are the possible emitted values
-export class TodoService extends Service<TodoServiceEvent> {
-  public static ID = "TODO_SERVICE"
-
-  // Inject persistence service into this service
-  private readonly persistence = this.bind(PersistenceService)
-
-  public todos = []
-
-  // Service constructors cannot have arguments
-  constructor() {
-    super()
-
-    this.todos = JSON.parse(this.persistence.read("todos") ?? "[]")
-  }
-
-  public addTodo(text: string) {
-    // ...
-
-    // You can access services via the bound fields
-    this.persistence.write("todos", JSON.stringify(this.todos))
-
-    // This is how you emit an event
-    this.emit({
-      type: "TODO_CREATED",
-      index,
-    })
-  }
-
-  public removeTodo(index: number) {
-    // ...
-
-    this.emit({
-      type: "TODO_DELETED",
-      index,
-    })
-  }
-}
-
-// Services need a container to run in
-const container = new Container()
-
-// You can initialize and get services using Container#bind
-// It will automatically initialize the service (and its dependencies)
-const todoService = container.bind(TodoService) // Returns an instance of TodoService
-```
-
-### Demo (Unit Test)
-
-`dioc/testing` contains `TestContainer` which lets you bind mocked services to the container.
-
-```ts
-import { TestContainer } from "dioc/testing"
-import { TodoService, PersistenceService } from "./demo.ts" // The above demo code snippet
-import { describe, it, expect, vi } from "vitest"
-
-describe("TodoService", () => {
-  it("addTodo writes to persistence", () => {
-    const container = new TestContainer()
-
-    const writeFn = vi.fn()
-
-    // The first parameter is the service to mock and the second parameter
-    // is the mocked service fields and functions
-    container.bindMock(PersistenceService, {
-      read: () => undefined, // Not really important for this test
-      write: writeFn,
-    })
-
-    // the peristence service bind in TodoService will now use the
-    // above defined mocked implementation
-    const todoService = container.bind(TodoService)
-
-    todoService.addTodo("sup")
-
-    expect(writeFn).toHaveBeenCalledOnce()
-    expect(writeFn).toHaveBeenCalledWith("todos", JSON.stringify(["sup"]))
-  })
-})
-```
-
-### Demo (Vue)
-
-`dioc/vue` contains a Vue Plugin and a `useService` composable that allows Vue components to use the defined services.
-
-In the app entry point:
-
-```ts
-import { createApp } from "vue"
-import { diocPlugin } from "dioc/vue"
-
-const app = createApp()
-
-app.use(diocPlugin, {
-  container: new Container(), // You can pass in the container you want to provide to the components here
-})
-```
-
-In your Vue components:
-
-```vue
-<script setup>
-import { TodoService } from "./demo.ts" // The above demo
-import { useService } from "dioc/vue"
-
-const todoService = useService(TodoService) // Returns an instance of the TodoService class
-</script>
-```

packages/dioc/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./dist/main.d.ts"
-export * from "./dist/main.d.ts"

packages/dioc/lib/container.ts

@@ -1,147 +0,0 @@
-import { Service } from "./service"
-import { Observable, Subject } from 'rxjs'
-
-/**
- * Stores the current container instance in the current operating context.
- *
- * NOTE: This should not be used outside of dioc library code
- */
-export let currentContainer: Container | null = null
-
-/**
- * The events emitted by the container
- *
- * `SERVICE_BIND` - emitted when a service is bound to the container directly or as a dependency to another service
- * `SERVICE_INIT` - emitted when a service is initialized
- */
-export type ContainerEvent =
-  | {
-    type: 'SERVICE_BIND';
-
-    /** The Service ID of the service being bounded (the dependency) */
-    boundeeID: string;
-
-    /**
-     * The Service ID of the bounder that is binding the boundee (the dependent)
-     *
-     * NOTE: This will be undefined if the service is bound directly to the container
-     */
-    bounderID: string | undefined
-  }
-  | {
-    type: 'SERVICE_INIT';
-
-    /** The Service ID of the service being initialized */
-    serviceID: string
-  }
-
-/**
- * The dependency injection container, allows for services to be initialized and maintains the dependency trees.
- */
-export class Container {
-  /** Used during the `bind` operation to detect circular dependencies */
-  private bindStack: string[] = []
-
-  /** The map of bound services to their IDs */
-  protected boundMap = new Map<string, Service<unknown>>()
-
-  /** The RxJS observable representing the event stream */
-  protected event$ = new Subject<ContainerEvent>()
-
-  /**
-   * Returns whether a container has the given service bound
-   * @param service The service to check for
-   */
-  public hasBound<
-    T extends typeof Service<any> & { ID: string }
-  >(service: T): boolean {
-    return this.boundMap.has(service.ID)
-  }
-
-  /**
-   * Returns the service bound to the container with the given ID or if not found, undefined.
-   *
-   * NOTE: This is an advanced method and should not be used as much as possible.
-   *
-   * @param serviceID The ID of the service to get
-   */
-  public getBoundServiceWithID(serviceID: string): Service<unknown> | undefined {
-    return this.boundMap.get(serviceID)
-  }
-
-  /**
-   * Binds a service to the container. This is equivalent to marking a service as a dependency.
-   * @param service The class reference of a service to bind
-   * @param bounder The class reference of the service that is binding the service (if bound directly to the container, this should be undefined)
-   */
-  public bind<T extends typeof Service<any> & { ID: string }>(
-    service: T,
-    bounder: ((typeof Service<T>) & { ID: string }) | undefined = undefined
-  ): InstanceType<T> {
-    // We need to store the current container in a variable so that we can restore it after the bind operation
-    const oldCurrentContainer = currentContainer;
-    currentContainer = this;
-
-    // If the service is already bound, return the existing instance
-    if (this.hasBound(service)) {
-      this.event$.next({
-        type: 'SERVICE_BIND',
-        boundeeID: service.ID,
-        bounderID: bounder?.ID // Return the bounder ID if it is defined, else assume its the container
-      })
-
-      return this.boundMap.get(service.ID) as InstanceType<T> // Casted as InstanceType<T> because service IDs and types are expected to match
-    }
-
-    // Detect circular dependency and throw error
-    if (this.bindStack.findIndex((serviceID) => serviceID === service.ID) !== -1) {
-      const circularServices = `${this.bindStack.join(' -> ')} -> ${service.ID}`
-
-      throw new Error(`Circular dependency detected.\nChain: ${circularServices}`)
-    }
-
-    // Push the service ID onto the bind stack to detect circular dependencies
-    this.bindStack.push(service.ID)
-
-    // Initialize the service and emit events
-
-    // NOTE: We need to cast the service to any as TypeScript thinks that the service is abstract
-    const instance: Service<any> = new (service as any)()
-
-    this.boundMap.set(service.ID, instance)
-
-    this.bindStack.pop()
-
-    this.event$.next({
-      type: 'SERVICE_INIT',
-      serviceID: service.ID,
-    })
-
-    this.event$.next({
-      type: 'SERVICE_BIND',
-      boundeeID: service.ID,
-      bounderID: bounder?.ID
-    })
-
-
-    // Restore the current container
-    currentContainer = oldCurrentContainer;
-
-    // We expect the return type to match the service definition
-    return instance as InstanceType<T>
-  }
-
-  /**
-   * Returns an iterator of the currently bound service IDs and their instances
-   */
-  public getBoundServices(): IterableIterator<[string, Service<any>]> {
-    return this.boundMap.entries()
-  }
-
-  /**
-   * Returns the public container event stream
-   */
-  public getEventStream(): Observable<ContainerEvent> {
-    return this.event$.asObservable()
-  }
-}

packages/dioc/lib/main.ts

@@ -1,2 +0,0 @@
-export * from "./container"
-export * from "./service"

packages/dioc/lib/service.ts

@@ -1,65 +0,0 @@
-import { Observable, Subject } from 'rxjs'
-import { Container, currentContainer } from './container'
-
-/**
- * A Dioc service that can bound to a container and can bind dependency services.
- *
- * NOTE: Services cannot have a constructor that takes arguments.
- *
- * @template EventDef The type of events that can be emitted by the service. These will be accessible by event streams
- */
-export abstract class Service<EventDef = {}> {
-
-  /**
-   * The internal event stream of the service
-   */
-  private event$ = new Subject<EventDef>()
-
-  /** The container the service is bound to */
-  #container: Container
-
-  constructor() {
-    if (!currentContainer) {
-      throw new Error(
-        `Tried to initialize service with no container (ID: ${ (this.constructor as any).ID })`
-      )
-    }
-
-    this.#container = currentContainer
-  }
-
-  /**
-   * Binds a dependency service into this service.
-   * @param service The class reference of the service to bind
-   */
-  protected bind<T extends typeof Service<any> & { ID: string }>(service: T): InstanceType<T> {
-    if (!currentContainer) {
-      throw new Error('No currentContainer defined.')
-    }
-
-    return currentContainer.bind(service, this.constructor as typeof Service<any> & { ID: string })
-  }
-
-  /**
-   * Returns the container the service is bound to
-   */
-  protected getContainer(): Container {
-    return this.#container
-  }
-
-  /**
-   * Emits an event on the service's event stream
-   * @param event The event to emit
-   */
-  protected emit(event: EventDef) {
-    this.event$.next(event)
-  }
-
-  /**
-   * Returns the event stream of the service
-   */
-  public getEventStream(): Observable<EventDef> {
-
-    return this.event$.asObservable()
-  }
-}

packages/dioc/lib/testing.ts

@@ -1,33 +0,0 @@
-import { Container, Service } from "./main";
-
-/**
- * A container that can be used for writing tests, contains additional methods
- * for binding suitable for writing tests. (see `bindMock`).
- */
-export class TestContainer extends Container {
-
-  /**
-   * Binds a mock service to the container.
-   *
-   * @param service
-   * @param mock
-   */
-  public bindMock<
-    T extends typeof Service<any> & { ID: string },
-    U extends Partial<InstanceType<T>>
-  >(service: T, mock: U): U {
-    if (this.boundMap.has(service.ID)) {
-      throw new Error(`Service '${service.ID}' already bound to container. Did you already call bindMock on this ?`)
-    }
-
-    this.boundMap.set(service.ID, mock as any)
-
-    this.event$.next({
-      type: "SERVICE_BIND",
-      boundeeID: service.ID,
-      bounderID: undefined,
-    })
-
-    return mock
-  }
-}

packages/dioc/lib/vue.ts

@@ -1,34 +0,0 @@
-import { Plugin, inject } from "vue"
-import { Container } from "./container"
-import { Service } from "./service"
-
-const VUE_CONTAINER_KEY = Symbol()
-
-// TODO: Some Vue version issue with plugin generics is breaking type checking
-/**
- * The Vue Dioc Plugin, this allows the composables to work and access the container
- *
- * NOTE: Make sure you add `vue` as dependency to be able to use this plugin (duh)
- */
-export const diocPlugin: Plugin = {
-  install(app, { container }) {
-    app.provide(VUE_CONTAINER_KEY, container)
-  }
-}
-
-/**
- * A composable that binds a service to a Vue Component
- *
- * @param service The class reference of the service to bind
- */
-export function useService<
-  T extends typeof Service<any> & { ID: string }
->(service: T): InstanceType<T> {
-  const container = inject(VUE_CONTAINER_KEY) as Container | undefined | null
-
-  if (!container) {
-    throw new Error("Container not found, did you forget to install the dioc plugin?")
-  }
-
-  return container.bind(service)
-}

packages/dioc/package.json

@@ -1,54 +0,0 @@
-{
-  "name": "dioc",
-  "private": true,
-  "version": "0.1.0",
-  "type": "module",
-  "files": [
-    "dist",
-    "index.d.ts"
-  ],
-  "main": "./dist/counter.umd.cjs",
-  "module": "./dist/counter.js",
-  "types": "./index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/main.d.ts",
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.js"
-    },
-    "./vue": {
-      "types": "./dist/vue.d.ts",
-      "require": "./dist/vue.cjs",
-      "import": "./dist/vue.js"
-    },
-    "./testing": {
-      "types": "./dist/testing.d.ts",
-      "require": "./dist/testing.cjs",
-      "import": "./dist/testing.js"
-    }
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build && tsc --emitDeclarationOnly",
-    "prepare": "pnpm run build",
-    "test": "vitest run",
-    "do-test": "pnpm run test",
-    "test:watch": "vitest"
-  },
-  "devDependencies": {
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4",
-    "vitest": "^0.29.3"
-  },
-  "dependencies": {
-    "rxjs": "^7.8.1"
-  },
-  "peerDependencies": {
-    "vue": "^3.2.25"
-  },
-  "peerDependenciesMeta": {
-    "vue": {
-      "optional": true
-    }
-  }
-}

packages/dioc/test/container.spec.ts

@@ -1,262 +0,0 @@
-import { it, expect, describe, vi } from "vitest"
-import { Service } from "../lib/service"
-import { Container, currentContainer, ContainerEvent } from "../lib/container"
-
-class TestServiceA extends Service {
-  public static ID = "TestServiceA"
-}
-
-class TestServiceB extends Service {
-  public static ID = "TestServiceB"
-
-  // Marked public to allow for testing
-  public readonly serviceA = this.bind(TestServiceA)
-}
-
-describe("Container", () => {
-  describe("getBoundServiceWithID", () => {
-    it("returns the service instance if it is bound to the container", () => {
-      const container = new Container()
-
-      const service = container.bind(TestServiceA)
-
-      expect(container.getBoundServiceWithID(TestServiceA.ID)).toBe(service)
-    })
-
-    it("returns undefined if the service is not bound to the container", () => {
-      const container = new Container()
-
-      expect(container.getBoundServiceWithID(TestServiceA.ID)).toBeUndefined()
-    })
-  })
-
-  describe("bind", () => {
-    it("correctly binds the service to it", () => {
-      const container = new Container()
-
-      const service = container.bind(TestServiceA)
-
-      // @ts-expect-error getContainer is defined as a protected property, but we are leveraging it here to check
-      expect(service.getContainer()).toBe(container)
-    })
-
-    it("after bind, the current container is set back to its previous value", () => {
-      const originalValue = currentContainer
-
-      const container = new Container()
-      container.bind(TestServiceA)
-
-      expect(currentContainer).toBe(originalValue)
-    })
-
-    it("dependent services are registered in the same container", () => {
-      const container = new Container()
-
-      const serviceB = container.bind(TestServiceB)
-
-      // @ts-expect-error getContainer is defined as a protected property, but we are leveraging it here to check
-      expect(serviceB.serviceA.getContainer()).toBe(container)
-    })
-
-    it("binding an already initialized service returns the initialized instance (services are singletons)", () => {
-      const container = new Container()
-
-      const serviceA = container.bind(TestServiceA)
-      const serviceA2 = container.bind(TestServiceA)
-
-      expect(serviceA).toBe(serviceA2)
-    })
-
-    it("binding a service which is a dependency of another service returns the same instance created from the dependency resolution (services are singletons)", () => {
-      const container = new Container()
-
-      const serviceB = container.bind(TestServiceB)
-      const serviceA = container.bind(TestServiceA)
-
-      expect(serviceB.serviceA).toBe(serviceA)
-    })
-
-    it("binding an initialized service as a dependency returns the same instance", () => {
-      const container = new Container()
-
-      const serviceA = container.bind(TestServiceA)
-      const serviceB = container.bind(TestServiceB)
-
-      expect(serviceB.serviceA).toBe(serviceA)
-    })
-
-    it("container emits an init event when an uninitialized service is initialized via bind and event only called once", () => {
-      const container = new Container()
-
-      const serviceFunc = vi.fn<
-        [ContainerEvent & { type: "SERVICE_INIT" }],
-        void
-      >()
-
-      container.getEventStream().subscribe((ev) => {
-        if (ev.type === "SERVICE_INIT") {
-          serviceFunc(ev)
-        }
-      })
-
-      const instance = container.bind(TestServiceA)
-
-      expect(serviceFunc).toHaveBeenCalledOnce()
-      expect(serviceFunc).toHaveBeenCalledWith(<ContainerEvent>{
-        type: "SERVICE_INIT",
-        serviceID: TestServiceA.ID,
-      })
-    })
-
-    it("the bind event emitted has an undefined bounderID when the service is bound directly to the container", () => {
-      const container = new Container()
-
-      const serviceFunc = vi.fn<
-        [ContainerEvent & { type: "SERVICE_BIND" }],
-        void
-      >()
-
-      container.getEventStream().subscribe((ev) => {
-        if (ev.type === "SERVICE_BIND") {
-          serviceFunc(ev)
-        }
-      })
-
-      container.bind(TestServiceA)
-
-      expect(serviceFunc).toHaveBeenCalledOnce()
-      expect(serviceFunc).toHaveBeenCalledWith(<ContainerEvent>{
-        type: "SERVICE_BIND",
-        boundeeID: TestServiceA.ID,
-        bounderID: undefined,
-      })
-    })
-
-    it("the bind event emitted has the correct bounderID when the service is bound to another service", () => {
-      const container = new Container()
-
-      const serviceFunc = vi.fn<
-        [ContainerEvent & { type: "SERVICE_BIND" }],
-        void
-      >()
-
-      container.getEventStream().subscribe((ev) => {
-        // We only care about the bind event of TestServiceA
-        if (ev.type === "SERVICE_BIND" && ev.boundeeID === TestServiceA.ID) {
-          serviceFunc(ev)
-        }
-      })
-
-      container.bind(TestServiceB)
-
-      expect(serviceFunc).toHaveBeenCalledOnce()
-      expect(serviceFunc).toHaveBeenCalledWith(<ContainerEvent>{
-        type: "SERVICE_BIND",
-        boundeeID: TestServiceA.ID,
-        bounderID: TestServiceB.ID,
-      })
-    })
-  })
-
-  describe("hasBound", () => {
-    it("returns true if the given service is bound to the container", () => {
-      const container = new Container()
-
-      container.bind(TestServiceA)
-
-      expect(container.hasBound(TestServiceA)).toEqual(true)
-    })
-
-    it("returns false if the given service is not bound to the container", () => {
-      const container = new Container()
-
-      expect(container.hasBound(TestServiceA)).toEqual(false)
-    })
-
-    it("returns true when the service is bound because it is a dependency of another service", () => {
-      const container = new Container()
-
-      container.bind(TestServiceB)
-
-      expect(container.hasBound(TestServiceA)).toEqual(true)
-    })
-  })
-
-  describe("getEventStream", () => {
-    it("returns an observable which emits events correctly when services are initialized", () => {
-      const container = new Container()
-
-      const serviceFunc = vi.fn<
-        [ContainerEvent & { type: "SERVICE_INIT" }],
-        void
-      >()
-
-      container.getEventStream().subscribe((ev) => {
-        if (ev.type === "SERVICE_INIT") {
-          serviceFunc(ev)
-        }
-      })
-
-      container.bind(TestServiceB)
-
-      expect(serviceFunc).toHaveBeenCalledTimes(2)
-      expect(serviceFunc).toHaveBeenNthCalledWith(1, <ContainerEvent>{
-        type: "SERVICE_INIT",
-        serviceID: TestServiceA.ID,
-      })
-      expect(serviceFunc).toHaveBeenNthCalledWith(2, <ContainerEvent>{
-        type: "SERVICE_INIT",
-        serviceID: TestServiceB.ID,
-      })
-    })
-
-    it("returns an observable which emits events correctly when services are bound", () => {
-      const container = new Container()
-
-      const serviceFunc = vi.fn<
-        [ContainerEvent & { type: "SERVICE_BIND" }],
-        void
-      >()
-
-      container.getEventStream().subscribe((ev) => {
-        if (ev.type === "SERVICE_BIND") {
-          serviceFunc(ev)
-        }
-      })
-
-      container.bind(TestServiceB)
-
-      expect(serviceFunc).toHaveBeenCalledTimes(2)
-      expect(serviceFunc).toHaveBeenNthCalledWith(1, <ContainerEvent>{
-        type: "SERVICE_BIND",
-        boundeeID: TestServiceA.ID,
-        bounderID: TestServiceB.ID,
-      })
-      expect(serviceFunc).toHaveBeenNthCalledWith(2, <ContainerEvent>{
-        type: "SERVICE_BIND",
-        boundeeID: TestServiceB.ID,
-        bounderID: undefined,
-      })
-    })
-  })
-
-  describe("getBoundServices", () => {
-    it("returns an iterator over all services bound to the container in the format [service id, service instance]", () => {
-      const container = new Container()
-
-      const instanceB = container.bind(TestServiceB)
-      const instanceA = instanceB.serviceA
-
-      expect(Array.from(container.getBoundServices())).toEqual([
-        [TestServiceA.ID, instanceA],
-        [TestServiceB.ID, instanceB],
-      ])
-    })
-
-    it("returns an empty iterator if no services are bound", () => {
-      const container = new Container()
-
-      expect(Array.from(container.getBoundServices())).toEqual([])
-    })
-  })
-})

packages/dioc/test/service.spec.ts

@@ -1,66 +0,0 @@
-import { describe, expect, it, vi } from "vitest"
-import { Service, Container } from "../lib/main"
-
-class TestServiceA extends Service {
-  public static ID = "TestServiceA"
-}
-
-class TestServiceB extends Service<"test"> {
-  public static ID = "TestServiceB"
-
-  // Marked public to allow for testing
-  public readonly serviceA = this.bind(TestServiceA)
-
-  public emitTestEvent() {
-    this.emit("test")
-  }
-}
-
-describe("Service", () => {
-  describe("constructor", () => {
-    it("throws an error if the service is initialized without a container", () => {
-      expect(() => new TestServiceA()).toThrowError(
-        "Tried to initialize service with no container (ID: TestServiceA)"
-      )
-    })
-  })
-
-  describe("bind", () => {
-    it("correctly binds the dependency service using the container", () => {
-      const container = new Container()
-
-      const serviceA = container.bind(TestServiceA)
-
-      const serviceB = container.bind(TestServiceB)
-      expect(serviceB.serviceA).toBe(serviceA)
-    })
-  })
-
-  describe("getContainer", () => {
-    it("returns the container the service is bound to", () => {
-      const container = new Container()
-
-      const serviceA = container.bind(TestServiceA)
-
-      // @ts-expect-error getContainer is a protected member, we are just using it to help with testing
-      expect(serviceA.getContainer()).toBe(container)
-    })
-  })
-
-  describe("getEventStream", () => {
-    it("returns the valid event stream of the service", () => {
-      const container = new Container()
-
-      const serviceB = container.bind(TestServiceB)
-
-      const serviceFunc = vi.fn()
-
-      serviceB.getEventStream().subscribe(serviceFunc)
-
-      serviceB.emitTestEvent()
-
-      expect(serviceFunc).toHaveBeenCalledOnce()
-      expect(serviceFunc).toHaveBeenCalledWith("test")
-    })
-  })
-})

packages/dioc/test/test-container.spec.ts

@@ -1,92 +0,0 @@
-import { describe, expect, it, vi } from "vitest"
-import { TestContainer } from "../lib/testing"
-import { Service } from "../lib/service"
-import { ContainerEvent } from "../lib/container"
-
-class TestServiceA extends Service {
-  public static ID = "TestServiceA"
-
-  public test() {
-    return "real"
-  }
-}
-
-class TestServiceB extends Service {
-  public static ID = "TestServiceB"
-
-  // declared public to help with testing
-  public readonly serviceA = this.bind(TestServiceA)
-
-  public test() {
-    return this.serviceA.test()
-  }
-}
-
-describe("TestContainer", () => {
-  describe("bindMock", () => {
-    it("returns the fake service defined", () => {
-      const container = new TestContainer()
-
-      const fakeService = {
-        test: () => "fake",
-      }
-
-      const result = container.bindMock(TestServiceA, fakeService)
-
-      expect(result).toBe(fakeService)
-    })
-
-    it("new services bound to the container get the mock service", () => {
-      const container = new TestContainer()
-
-      const fakeServiceA = {
-        test: () => "fake",
-      }
-
-      container.bindMock(TestServiceA, fakeServiceA)
-
-      const serviceB = container.bind(TestServiceB)
-
-      expect(serviceB.serviceA).toBe(fakeServiceA)
-    })
-
-    it("container emits SERVICE_BIND event", () => {
-      const container = new TestContainer()
-
-      const fakeServiceA = {
-        test: () => "fake",
-      }
-
-      const serviceFunc = vi.fn<[ContainerEvent, void]>()
-
-      container.getEventStream().subscribe((ev) => {
-        serviceFunc(ev)
-      })
-
-      container.bindMock(TestServiceA, fakeServiceA)
-
-      expect(serviceFunc).toHaveBeenCalledOnce()
-      expect(serviceFunc).toHaveBeenCalledWith(<ContainerEvent>{
-        type: "SERVICE_BIND",
-        boundeeID: TestServiceA.ID,
-        bounderID: undefined,
-      })
-    })
-
-    it("throws if service already bound", () => {
-      const container = new TestContainer()
-
-      const fakeServiceA = {
-        test: () => "fake",
-      }
-
-      container.bindMock(TestServiceA, fakeServiceA)
-
-      expect(() => {
-        container.bindMock(TestServiceA, fakeServiceA)
-      }).toThrowError(
-        "Service 'TestServiceA' already bound to container. Did you already call bindMock on this ?"
-      )
-    })
-  })
-})

packages/dioc/testing.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./dist/testing.d.ts"
-export * from "./dist/testing.d.ts"

packages/dioc/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ESNext", "DOM"],
-    "moduleResolution": "Node",
-    "strict": true,
-    "declaration": true,
-    "sourceMap": true,
-    "outDir": "dist",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "skipLibCheck": true
-  },
-  "include": ["lib"]
-}

packages/dioc/vite.config.ts

@@ -1,16 +0,0 @@
-import { defineConfig } from 'vite'
-
-export default defineConfig({
-  build: {
-    lib: {
-      entry: {
-        index: './lib/main.ts',
-        vue: './lib/vue.ts',
-        testing: './lib/testing.ts',
-      },
-    },
-    rollupOptions: {
-      external: ['vue'],
-    }
-  },
-})

packages/dioc/vitest.config.ts

@@ -1,7 +0,0 @@
-import { defineConfig } from "vitest/config"
-
-export default defineConfig({
-  test: {
-
-  }
-})

packages/dioc/vue.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./dist/vue.d.ts"
-export * from "./dist/vue.d.ts"

packages/hoppscotch-backend/package.json

@@ -28,6 +28,7 @@
     "@nestjs-modules/mailer": "^1.9.1",
     "@nestjs/apollo": "^12.0.9",
     "@nestjs/common": "^10.2.6",
+    "@nestjs/config": "^3.1.1",
     "@nestjs/core": "^10.2.6",
     "@nestjs/graphql": "^12.0.9",
     "@nestjs/jwt": "^10.1.1",

packages/hoppscotch-backend/prisma/migrations/20231124104640_infra_config/migration.sql

@@ -0,0 +1,14 @@
+-- CreateTable
+CREATE TABLE "InfraConfig" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "value" TEXT,
+    "active" BOOLEAN NOT NULL DEFAULT true,
+    "createdOn" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedOn" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "InfraConfig_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "InfraConfig_name_key" ON "InfraConfig"("name");

packages/hoppscotch-backend/prisma/schema.prisma

@@ -209,3 +209,12 @@ enum TeamMemberRole {
   VIEWER
   EDITOR
 }
+
+model InfraConfig {
+  id        String   @id @default(cuid())
+  name      String   @unique
+  value     String?
+  active    Boolean  @default(true) // Use case: Let's say, Admin wants to disable Google SSO, but doesn't want to delete the config
+  createdOn DateTime @default(now()) @db.Timestamp(3)
+  updatedOn DateTime @updatedAt @db.Timestamp(3)
+}

packages/hoppscotch-backend/src/admin/admin.module.ts

@@ -4,7 +4,6 @@ import { AdminService } from './admin.service';
 import { PrismaModule } from '../prisma/prisma.module';
 import { PubSubModule } from '../pubsub/pubsub.module';
 import { UserModule } from '../user/user.module';
-import { MailerModule } from '../mailer/mailer.module';
 import { TeamModule } from '../team/team.module';
 import { TeamInvitationModule } from '../team-invitation/team-invitation.module';
 import { TeamEnvironmentsModule } from '../team-environments/team-environments.module';
@@ -12,19 +11,20 @@ import { TeamCollectionModule } from '../team-collection/team-collection.module'
 import { TeamRequestModule } from '../team-request/team-request.module';
 import { InfraResolver } from './infra.resolver';
 import { ShortcodeModule } from 'src/shortcode/shortcode.module';
+import { InfraConfigModule } from 'src/infra-config/infra-config.module';
 
 @Module({
   imports: [
     PrismaModule,
     PubSubModule,
     UserModule,
-    MailerModule,
     TeamModule,
     TeamInvitationModule,
     TeamEnvironmentsModule,
     TeamCollectionModule,
     TeamRequestModule,
     ShortcodeModule,
+    InfraConfigModule,
   ],
   providers: [InfraResolver, AdminResolver, AdminService],
   exports: [AdminService],

packages/hoppscotch-backend/src/admin/admin.service.spec.ts

@@ -16,6 +16,7 @@ import {
   USER_ALREADY_INVITED,
 } from '../errors';
 import { ShortcodeService } from 'src/shortcode/shortcode.service';
+import { ConfigService } from '@nestjs/config';
 
 const mockPrisma = mockDeep<PrismaService>();
 const mockPubSub = mockDeep<PubSubService>();
@@ -27,6 +28,7 @@ const mockTeamInvitationService = mockDeep<TeamInvitationService>();
 const mockTeamCollectionService = mockDeep<TeamCollectionService>();
 const mockMailerService = mockDeep<MailerService>();
 const mockShortcodeService = mockDeep<ShortcodeService>();
+const mockConfigService = mockDeep<ConfigService>();
 
 const adminService = new AdminService(
   mockUserService,
@@ -39,6 +41,7 @@ const adminService = new AdminService(
   mockPrisma as any,
   mockMailerService,
   mockShortcodeService,
+  mockConfigService,
 );
 
 const invitedUsers: InvitedUsers[] = [

packages/hoppscotch-backend/src/admin/admin.service.ts

@@ -25,6 +25,7 @@ import { TeamEnvironmentsService } from '../team-environments/team-environments.
 import { TeamInvitationService } from '../team-invitation/team-invitation.service';
 import { TeamMemberRole } from '../team/team.model';
 import { ShortcodeService } from 'src/shortcode/shortcode.service';
+import { ConfigService } from '@nestjs/config';
 
 @Injectable()
 export class AdminService {
@@ -39,6 +40,7 @@ export class AdminService {
     private readonly prisma: PrismaService,
     private readonly mailerService: MailerService,
     private readonly shortcodeService: ShortcodeService,
+    private readonly configService: ConfigService,
   ) {}
 
   /**
@@ -79,7 +81,7 @@ export class AdminService {
         template: 'user-invitation',
         variables: {
           inviteeEmail: inviteeEmail,
-          magicLink: `${process.env.VITE_BASE_URL}`,
+          magicLink: `${this.configService.get('VITE_BASE_URL')}`,
         },
       });
     } catch (e) {

packages/hoppscotch-backend/src/admin/infra.resolver.ts

@@ -1,5 +1,12 @@
 import { UseGuards } from '@nestjs/common';
-import { Args, ID, Query, ResolveField, Resolver } from '@nestjs/graphql';
+import {
+  Args,
+  ID,
+  Mutation,
+  Query,
+  ResolveField,
+  Resolver,
+} from '@nestjs/graphql';
 import { GqlThrottlerGuard } from 'src/guards/gql-throttler.guard';
 import { Infra } from './infra.model';
 import { AdminService } from './admin.service';
@@ -16,11 +23,21 @@ import { Team } from 'src/team/team.model';
 import { TeamInvitation } from 'src/team-invitation/team-invitation.model';
 import { GqlAdmin } from './decorators/gql-admin.decorator';
 import { ShortcodeWithUserEmail } from 'src/shortcode/shortcode.model';
+import { InfraConfig } from 'src/infra-config/infra-config.model';
+import { InfraConfigService } from 'src/infra-config/infra-config.service';
+import {
+  EnableAndDisableSSOArgs,
+  InfraConfigArgs,
+} from 'src/infra-config/input-args';
+import { InfraConfigEnumForClient } from 'src/types/InfraConfig';
 
 @UseGuards(GqlThrottlerGuard)
 @Resolver(() => Infra)
 export class InfraResolver {
-  constructor(private adminService: AdminService) {}
+  constructor(
+    private adminService: AdminService,
+    private infraConfigService: InfraConfigService,
+  ) {}
 
   @Query(() => Infra, {
     description: 'Fetch details of the Infrastructure',
@@ -222,4 +239,76 @@ export class InfraResolver {
       userEmail,
     );
   }
+
+  @Query(() => [InfraConfig], {
+    description: 'Retrieve configuration details for the instance',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  async infraConfigs(
+    @Args({
+      name: 'configNames',
+      type: () => [InfraConfigEnumForClient],
+      description: 'Configs to fetch',
+    })
+    names: InfraConfigEnumForClient[],
+  ) {
+    const infraConfigs = await this.infraConfigService.getMany(names);
+    if (E.isLeft(infraConfigs)) throwErr(infraConfigs.left);
+    return infraConfigs.right;
+  }
+
+  @Query(() => [String], {
+    description: 'Allowed Auth Provider list',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  allowedAuthProviders() {
+    return this.infraConfigService.getAllowedAuthProviders();
+  }
+
+  /* Mutations */
+
+  @Mutation(() => [InfraConfig], {
+    description: 'Update Infra Configs',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  async updateInfraConfigs(
+    @Args({
+      name: 'infraConfigs',
+      type: () => [InfraConfigArgs],
+      description: 'InfraConfigs to update',
+    })
+    infraConfigs: InfraConfigArgs[],
+  ) {
+    const updatedRes = await this.infraConfigService.updateMany(infraConfigs);
+    if (E.isLeft(updatedRes)) throwErr(updatedRes.left);
+    return updatedRes.right;
+  }
+
+  @Mutation(() => Boolean, {
+    description: 'Reset Infra Configs with default values (.env)',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  async resetInfraConfigs() {
+    const resetRes = await this.infraConfigService.reset();
+    if (E.isLeft(resetRes)) throwErr(resetRes.left);
+    return true;
+  }
+
+  @Mutation(() => Boolean, {
+    description: 'Enable or Disable SSO for login/signup',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  async enableAndDisableSSO(
+    @Args({
+      name: 'providerInfo',
+      type: () => [EnableAndDisableSSOArgs],
+      description: 'SSO provider and status',
+    })
+    providerInfo: EnableAndDisableSSOArgs[],
+  ) {
+    const isUpdated = await this.infraConfigService.enableAndDisableSSO(providerInfo);
+    if (E.isLeft(isUpdated)) throwErr(isUpdated.left);
+
+    return true;
+  }
 }

packages/hoppscotch-backend/src/app.module.ts

@@ -20,51 +20,69 @@ import { ShortcodeModule } from './shortcode/shortcode.module';
 import { COOKIES_NOT_FOUND } from './errors';
 import { ThrottlerModule } from '@nestjs/throttler';
 import { AppController } from './app.controller';
+import { ConfigModule, ConfigService } from '@nestjs/config';
+import { InfraConfigModule } from './infra-config/infra-config.module';
+import { loadInfraConfiguration } from './infra-config/helper';
+import { MailerModule } from './mailer/mailer.module';
 
 @Module({
   imports: [
-    GraphQLModule.forRoot<ApolloDriverConfig>({
+    ConfigModule.forRoot({
-      buildSchemaOptions: {
+      isGlobal: true,
-        numberScalarMode: 'integer',
+      load: [async () => loadInfraConfiguration()],
-      },
-      playground: process.env.PRODUCTION !== 'true',
-      autoSchemaFile: true,
-      installSubscriptionHandlers: true,
-      subscriptions: {
-        'subscriptions-transport-ws': {
-          path: '/graphql',
-          onConnect: (_, websocket) => {
-            try {
-              const cookies = subscriptionContextCookieParser(
-                websocket.upgradeReq.headers.cookie,
-              );
-
-              return {
-                headers: { ...websocket?.upgradeReq?.headers, cookies },
-              };
-            } catch (error) {
-              throw new HttpException(COOKIES_NOT_FOUND, 400, {
-                cause: new Error(COOKIES_NOT_FOUND),
-              });
-            }
-          },
-        },
-      },
-      context: ({ req, res, connection }) => ({
-        req,
-        res,
-        connection,
-      }),
-      driver: ApolloDriver,
     }),
-    ThrottlerModule.forRoot([
+    GraphQLModule.forRootAsync<ApolloDriverConfig>({
-      {
+      driver: ApolloDriver,
-        ttl: +process.env.RATE_LIMIT_TTL,
+      imports: [ConfigModule],
-        limit: +process.env.RATE_LIMIT_MAX,
+      inject: [ConfigService],
+      useFactory: async (configService: ConfigService) => {
+        return {
+          buildSchemaOptions: {
+            numberScalarMode: 'integer',
+          },
+          playground: configService.get('PRODUCTION') !== 'true',
+          autoSchemaFile: true,
+          installSubscriptionHandlers: true,
+          subscriptions: {
+            'subscriptions-transport-ws': {
+              path: '/graphql',
+              onConnect: (_, websocket) => {
+                try {
+                  const cookies = subscriptionContextCookieParser(
+                    websocket.upgradeReq.headers.cookie,
+                  );
+                  return {
+                    headers: { ...websocket?.upgradeReq?.headers, cookies },
+                  };
+                } catch (error) {
+                  throw new HttpException(COOKIES_NOT_FOUND, 400, {
+                    cause: new Error(COOKIES_NOT_FOUND),
+                  });
+                }
+              },
+            },
+          },
+          context: ({ req, res, connection }) => ({
+            req,
+            res,
+            connection,
+          }),
+        };
       },
-    ]),
+    }),
+    ThrottlerModule.forRootAsync({
+      imports: [ConfigModule],
+      inject: [ConfigService],
+      useFactory: async (configService: ConfigService) => [
+        {
+          ttl: +configService.get('RATE_LIMIT_TTL'),
+          limit: +configService.get('RATE_LIMIT_MAX'),
+        },
+      ],
+    }),
+    MailerModule.register(),
     UserModule,
-    AuthModule,
+    AuthModule.register(),
     AdminModule,
     UserSettingsModule,
     UserEnvironmentsModule,
@@ -77,6 +95,7 @@ import { AppController } from './app.controller';
     TeamInvitationModule,
     UserCollectionModule,
     ShortcodeModule,
+    InfraConfigModule,
   ],
   providers: [GQLComplexityPlugin],
   controllers: [AppController],

packages/hoppscotch-backend/src/auth/auth.controller.ts

@@ -2,7 +2,6 @@ import {
   Body,
   Controller,
   Get,
-  InternalServerErrorException,
   Post,
   Query,
   Request,
@@ -31,11 +30,21 @@ import { MicrosoftSSOGuard } from './guards/microsoft-sso-.guard';
 import { ThrottlerBehindProxyGuard } from 'src/guards/throttler-behind-proxy.guard';
 import { SkipThrottle } from '@nestjs/throttler';
 import { AUTH_PROVIDER_NOT_SPECIFIED } from 'src/errors';
+import { ConfigService } from '@nestjs/config';
 
 @UseGuards(ThrottlerBehindProxyGuard)
 @Controller({ path: 'auth', version: '1' })
 export class AuthController {
-  constructor(private authService: AuthService) {}
+  constructor(
+    private authService: AuthService,
+    private configService: ConfigService,
+  ) {}
+
+  @Get('providers')
+  async getAuthProviders() {
+    const providers = await this.authService.getAuthProviders();
+    return { providers };
+  }
 
   /**
    ** Route to initiate magic-link auth for a users email
@@ -45,8 +54,14 @@ export class AuthController {
     @Body() authData: SignInMagicDto,
     @Query('origin') origin: string,
   ) {
-    if (!authProviderCheck(AuthProvider.EMAIL))
+    if (
+      !authProviderCheck(
+        AuthProvider.EMAIL,
+        this.configService.get('INFRA.VITE_ALLOWED_AUTH_PROVIDERS'),
+      )
+    ) {
       throwHTTPErr({ message: AUTH_PROVIDER_NOT_SPECIFIED, statusCode: 404 });
+    }
 
     const deviceIdToken = await this.authService.signInMagicLink(
       authData.email,

packages/hoppscotch-backend/src/auth/auth.module.ts

@@ -2,7 +2,6 @@ import { Module } from '@nestjs/common';
 import { AuthService } from './auth.service';
 import { AuthController } from './auth.controller';
 import { UserModule } from 'src/user/user.module';
-import { MailerModule } from 'src/mailer/mailer.module';
 import { PrismaModule } from 'src/prisma/prisma.module';
 import { PassportModule } from '@nestjs/passport';
 import { JwtModule } from '@nestjs/jwt';
@@ -12,25 +11,47 @@ import { GoogleStrategy } from './strategies/google.strategy';
 import { GithubStrategy } from './strategies/github.strategy';
 import { MicrosoftStrategy } from './strategies/microsoft.strategy';
 import { AuthProvider, authProviderCheck } from './helper';
+import { ConfigModule, ConfigService } from '@nestjs/config';
+import { loadInfraConfiguration } from 'src/infra-config/helper';
+import { InfraConfigModule } from 'src/infra-config/infra-config.module';
 
 @Module({
   imports: [
     PrismaModule,
     UserModule,
-    MailerModule,
     PassportModule,
-    JwtModule.register({
+    JwtModule.registerAsync({
-      secret: process.env.JWT_SECRET,
+      imports: [ConfigModule],
+      inject: [ConfigService],
+      useFactory: async (configService: ConfigService) => ({
+        secret: configService.get('JWT_SECRET'),
+      }),
     }),
+    InfraConfigModule,
   ],
-  providers: [
+  providers: [AuthService, JwtStrategy, RTJwtStrategy],
-    AuthService,
-    JwtStrategy,
-    RTJwtStrategy,
-    ...(authProviderCheck(AuthProvider.GOOGLE) ? [GoogleStrategy] : []),
-    ...(authProviderCheck(AuthProvider.GITHUB) ? [GithubStrategy] : []),
-    ...(authProviderCheck(AuthProvider.MICROSOFT) ? [MicrosoftStrategy] : []),
-  ],
   controllers: [AuthController],
 })
-export class AuthModule {}
+export class AuthModule {
+  static async register() {
+    const env = await loadInfraConfiguration();
+    const allowedAuthProviders = env.INFRA.VITE_ALLOWED_AUTH_PROVIDERS;
+
+    const providers = [
+      ...(authProviderCheck(AuthProvider.GOOGLE, allowedAuthProviders)
+        ? [GoogleStrategy]
+        : []),
+      ...(authProviderCheck(AuthProvider.GITHUB, allowedAuthProviders)
+        ? [GithubStrategy]
+        : []),
+      ...(authProviderCheck(AuthProvider.MICROSOFT, allowedAuthProviders)
+        ? [MicrosoftStrategy]
+        : []),
+    ];
+
+    return {
+      module: AuthModule,
+      providers,
+    };
+  }
+}

packages/hoppscotch-backend/src/auth/auth.service.spec.ts

@@ -21,15 +21,26 @@ import { VerifyMagicDto } from './dto/verify-magic.dto';
 import { DateTime } from 'luxon';
 import * as argon2 from 'argon2';
 import * as E from 'fp-ts/Either';
+import { ConfigService } from '@nestjs/config';
+import { InfraConfigService } from 'src/infra-config/infra-config.service';
 
 const mockPrisma = mockDeep<PrismaService>();
 const mockUser = mockDeep<UserService>();
 const mockJWT = mockDeep<JwtService>();
 const mockMailer = mockDeep<MailerService>();
+const mockConfigService = mockDeep<ConfigService>();
+const mockInfraConfigService = mockDeep<InfraConfigService>();
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-const authService = new AuthService(mockUser, mockPrisma, mockJWT, mockMailer);
+const authService = new AuthService(
+  mockUser,
+  mockPrisma,
+  mockJWT,
+  mockMailer,
+  mockConfigService,
+  mockInfraConfigService,
+);
 
 const currentTime = new Date();
 
@@ -91,6 +102,8 @@ describe('signInMagicLink', () => {
     mockUser.createUserViaMagicLink.mockResolvedValue(user);
     // create new entry in VerificationToken table
     mockPrisma.verificationToken.create.mockResolvedValueOnce(passwordlessData);
+    // Read env variable 'MAGIC_LINK_TOKEN_VALIDITY' from config service
+    mockConfigService.get.mockReturnValue('3');
 
     const result = await authService.signInMagicLink(
       'dwight@dundermifflin.com',

packages/hoppscotch-backend/src/auth/auth.service.ts

@@ -28,6 +28,8 @@ import { AuthError } from 'src/types/AuthError';
 import { AuthUser, IsAdmin } from 'src/types/AuthUser';
 import { VerificationToken } from '@prisma/client';
 import { Origin } from './helper';
+import { ConfigService } from '@nestjs/config';
+import { InfraConfigService } from 'src/infra-config/infra-config.service';
 
 @Injectable()
 export class AuthService {
@@ -36,6 +38,8 @@ export class AuthService {
     private prismaService: PrismaService,
     private jwtService: JwtService,
     private readonly mailerService: MailerService,
+    private readonly configService: ConfigService,
+    private infraConfigService: InfraConfigService,
   ) {}
 
   /**
@@ -46,10 +50,12 @@ export class AuthService {
    */
   private async generateMagicLinkTokens(user: AuthUser) {
     const salt = await bcrypt.genSalt(
-      parseInt(process.env.TOKEN_SALT_COMPLEXITY),
+      parseInt(this.configService.get('TOKEN_SALT_COMPLEXITY')),
     );
     const expiresOn = DateTime.now()
-      .plus({ hours: parseInt(process.env.MAGIC_LINK_TOKEN_VALIDITY) })
+      .plus({
+        hours: parseInt(this.configService.get('MAGIC_LINK_TOKEN_VALIDITY')),
+      })
       .toISO()
       .toString();
 
@@ -95,13 +101,13 @@ export class AuthService {
    */
   private async generateRefreshToken(userUid: string) {
     const refreshTokenPayload: RefreshTokenPayload = {
-      iss: process.env.VITE_BASE_URL,
+      iss: this.configService.get('VITE_BASE_URL'),
       sub: userUid,
-      aud: [process.env.VITE_BASE_URL],
+      aud: [this.configService.get('VITE_BASE_URL')],
     };
 
     const refreshToken = await this.jwtService.sign(refreshTokenPayload, {
-      expiresIn: process.env.REFRESH_TOKEN_VALIDITY, //7 Days
+      expiresIn: this.configService.get('REFRESH_TOKEN_VALIDITY'), //7 Days
     });
 
     const refreshTokenHash = await argon2.hash(refreshToken);
@@ -127,9 +133,9 @@ export class AuthService {
    */
   async generateAuthTokens(userUid: string) {
     const accessTokenPayload: AccessTokenPayload = {
-      iss: process.env.VITE_BASE_URL,
+      iss: this.configService.get('VITE_BASE_URL'),
       sub: userUid,
-      aud: [process.env.VITE_BASE_URL],
+      aud: [this.configService.get('VITE_BASE_URL')],
     };
 
     const refreshToken = await this.generateRefreshToken(userUid);
@@ -137,7 +143,7 @@ export class AuthService {
 
     return E.right(<AuthTokens>{
       access_token: await this.jwtService.sign(accessTokenPayload, {
-        expiresIn: process.env.ACCESS_TOKEN_VALIDITY, //1 Day
+        expiresIn: this.configService.get('ACCESS_TOKEN_VALIDITY'), //1 Day
       }),
       refresh_token: refreshToken.right,
     });
@@ -218,14 +224,14 @@ export class AuthService {
     let url: string;
     switch (origin) {
       case Origin.ADMIN:
-        url = process.env.VITE_ADMIN_URL;
+        url = this.configService.get('VITE_ADMIN_URL');
         break;
       case Origin.APP:
-        url = process.env.VITE_BASE_URL;
+        url = this.configService.get('VITE_BASE_URL');
         break;
       default:
         // if origin is invalid by default set URL to Hoppscotch-App
-        url = process.env.VITE_BASE_URL;
+        url = this.configService.get('VITE_BASE_URL');
     }
 
     await this.mailerService.sendEmail(email, {
@@ -377,4 +383,8 @@ export class AuthService {
 
     return E.right(<IsAdmin>{ isAdmin: false });
   }
+
+  getAuthProviders() {
+    return this.infraConfigService.getAllowedAuthProviders();
+  }
 }

packages/hoppscotch-backend/src/auth/guards/github-sso.guard.ts

@@ -3,14 +3,25 @@ import { AuthGuard } from '@nestjs/passport';
 import { AuthProvider, authProviderCheck, throwHTTPErr } from '../helper';
 import { Observable } from 'rxjs';
 import { AUTH_PROVIDER_NOT_SPECIFIED } from 'src/errors';
+import { ConfigService } from '@nestjs/config';
 
 @Injectable()
 export class GithubSSOGuard extends AuthGuard('github') implements CanActivate {
+  constructor(private readonly configService: ConfigService) {
+    super();
+  }
+
   canActivate(
     context: ExecutionContext,
   ): boolean | Promise<boolean> | Observable<boolean> {
-    if (!authProviderCheck(AuthProvider.GITHUB))
+    if (
+      !authProviderCheck(
+        AuthProvider.GITHUB,
+        this.configService.get('INFRA.VITE_ALLOWED_AUTH_PROVIDERS'),
+      )
+    ) {
       throwHTTPErr({ message: AUTH_PROVIDER_NOT_SPECIFIED, statusCode: 404 });
+    }
 
     return super.canActivate(context);
   }

packages/hoppscotch-backend/src/auth/guards/google-sso.guard.ts

@@ -3,14 +3,25 @@ import { AuthGuard } from '@nestjs/passport';
 import { AuthProvider, authProviderCheck, throwHTTPErr } from '../helper';
 import { Observable } from 'rxjs';
 import { AUTH_PROVIDER_NOT_SPECIFIED } from 'src/errors';
+import { ConfigService } from '@nestjs/config';
 
 @Injectable()
 export class GoogleSSOGuard extends AuthGuard('google') implements CanActivate {
+  constructor(private readonly configService: ConfigService) {
+    super();
+  }
+
   canActivate(
     context: ExecutionContext,
   ): boolean | Promise<boolean> | Observable<boolean> {
-    if (!authProviderCheck(AuthProvider.GOOGLE))
+    if (
+      !authProviderCheck(
+        AuthProvider.GOOGLE,
+        this.configService.get('INFRA.VITE_ALLOWED_AUTH_PROVIDERS'),
+      )
+    ) {
       throwHTTPErr({ message: AUTH_PROVIDER_NOT_SPECIFIED, statusCode: 404 });
+    }
 
     return super.canActivate(context);
   }

packages/hoppscotch-backend/src/auth/guards/microsoft-sso-.guard.ts

@@ -3,20 +3,31 @@ import { AuthGuard } from '@nestjs/passport';
 import { AuthProvider, authProviderCheck, throwHTTPErr } from '../helper';
 import { Observable } from 'rxjs';
 import { AUTH_PROVIDER_NOT_SPECIFIED } from 'src/errors';
+import { ConfigService } from '@nestjs/config';
 
 @Injectable()
 export class MicrosoftSSOGuard
   extends AuthGuard('microsoft')
   implements CanActivate
 {
+  constructor(private readonly configService: ConfigService) {
+    super();
+  }
+
   canActivate(
     context: ExecutionContext,
   ): boolean | Promise<boolean> | Observable<boolean> {
-    if (!authProviderCheck(AuthProvider.MICROSOFT))
+    if (
+      !authProviderCheck(
+        AuthProvider.MICROSOFT,
+        this.configService.get('INFRA.VITE_ALLOWED_AUTH_PROVIDERS'),
+      )
+    ) {
       throwHTTPErr({
         message: AUTH_PROVIDER_NOT_SPECIFIED,
         statusCode: 404,
       });
+    }
 
     return super.canActivate(context);
   }

packages/hoppscotch-backend/src/auth/helper.ts

@@ -6,6 +6,7 @@ import { Response } from 'express';
 import * as cookie from 'cookie';
 import { AUTH_PROVIDER_NOT_SPECIFIED, COOKIES_NOT_FOUND } from 'src/errors';
 import { throwErr } from 'src/utils';
+import { ConfigService } from '@nestjs/config';
 
 enum AuthTokenType {
   ACCESS_TOKEN = 'access_token',
@@ -45,15 +46,17 @@ export const authCookieHandler = (
   redirect: boolean,
   redirectUrl: string | null,
 ) => {
+  const configService = new ConfigService();
+
   const currentTime = DateTime.now();
   const accessTokenValidity = currentTime
     .plus({
-      milliseconds: parseInt(process.env.ACCESS_TOKEN_VALIDITY),
+      milliseconds: parseInt(configService.get('ACCESS_TOKEN_VALIDITY')),
     })
     .toMillis();
   const refreshTokenValidity = currentTime
     .plus({
-      milliseconds: parseInt(process.env.REFRESH_TOKEN_VALIDITY),
+      milliseconds: parseInt(configService.get('REFRESH_TOKEN_VALIDITY')),
     })
     .toMillis();
 
@@ -75,10 +78,12 @@ export const authCookieHandler = (
   }
 
   // check to see if redirectUrl is a whitelisted url
-  const whitelistedOrigins = process.env.WHITELISTED_ORIGINS.split(',');
+  const whitelistedOrigins = configService
+    .get('WHITELISTED_ORIGINS')
+    .split(',');
   if (!whitelistedOrigins.includes(redirectUrl))
     // if it is not redirect by default to REDIRECT_URL
-    redirectUrl = process.env.REDIRECT_URL;
+    redirectUrl = configService.get('REDIRECT_URL');
 
   return res.status(HttpStatus.OK).redirect(redirectUrl);
 };
@@ -112,13 +117,16 @@ export const subscriptionContextCookieParser = (rawCookies: string) => {
  * @param provider Provider we want to check the presence of
  * @returns Boolean if provider specified is present or not
  */
-export function authProviderCheck(provider: string) {
+export function authProviderCheck(
+  provider: string,
+  VITE_ALLOWED_AUTH_PROVIDERS: string,
+) {
   if (!provider) {
     throwErr(AUTH_PROVIDER_NOT_SPECIFIED);
   }
 
-  const envVariables = process.env.VITE_ALLOWED_AUTH_PROVIDERS
+  const envVariables = VITE_ALLOWED_AUTH_PROVIDERS
-    ? process.env.VITE_ALLOWED_AUTH_PROVIDERS.split(',').map((provider) =>
+    ? VITE_ALLOWED_AUTH_PROVIDERS.split(',').map((provider) =>
         provider.trim().toUpperCase(),
       )
     : [];

packages/hoppscotch-backend/src/auth/strategies/github.strategy.ts

@@ -5,18 +5,20 @@ import { AuthService } from '../auth.service';
 import { UserService } from 'src/user/user.service';
 import * as O from 'fp-ts/Option';
 import * as E from 'fp-ts/Either';
+import { ConfigService } from '@nestjs/config';
 
 @Injectable()
 export class GithubStrategy extends PassportStrategy(Strategy) {
   constructor(
     private authService: AuthService,
     private usersService: UserService,
+    private configService: ConfigService,
   ) {
     super({
-      clientID: process.env.GITHUB_CLIENT_ID,
+      clientID: configService.get('INFRA.GITHUB_CLIENT_ID'),
-      clientSecret: process.env.GITHUB_CLIENT_SECRET,
+      clientSecret: configService.get('INFRA.GITHUB_CLIENT_SECRET'),
-      callbackURL: process.env.GITHUB_CALLBACK_URL,
+      callbackURL: configService.get('GITHUB_CALLBACK_URL'),
-      scope: [process.env.GITHUB_SCOPE],
+      scope: [configService.get('GITHUB_SCOPE')],
       store: true,
     });
   }

packages/hoppscotch-backend/src/auth/strategies/google.strategy.ts

@@ -5,18 +5,20 @@ import { UserService } from 'src/user/user.service';
 import * as O from 'fp-ts/Option';
 import { AuthService } from '../auth.service';
 import * as E from 'fp-ts/Either';
+import { ConfigService } from '@nestjs/config';
 
 @Injectable()
 export class GoogleStrategy extends PassportStrategy(Strategy) {
   constructor(
     private usersService: UserService,
     private authService: AuthService,
+    private configService: ConfigService,
   ) {
     super({
-      clientID: process.env.GOOGLE_CLIENT_ID,
+      clientID: configService.get('INFRA.GOOGLE_CLIENT_ID'),
-      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+      clientSecret: configService.get('INFRA.GOOGLE_CLIENT_SECRET'),
-      callbackURL: process.env.GOOGLE_CALLBACK_URL,
+      callbackURL: configService.get('GOOGLE_CALLBACK_URL'),
-      scope: process.env.GOOGLE_SCOPE.split(','),
+      scope: configService.get('GOOGLE_SCOPE').split(','),
       passReqToCallback: true,
       store: true,
     });

packages/hoppscotch-backend/src/auth/strategies/jwt.strategy.ts

@@ -15,10 +15,14 @@ import {
   INVALID_ACCESS_TOKEN,
   USER_NOT_FOUND,
 } from 'src/errors';
+import { ConfigService } from '@nestjs/config';
 
 @Injectable()
 export class JwtStrategy extends PassportStrategy(Strategy, 'jwt') {
-  constructor(private usersService: UserService) {
+  constructor(
+    private usersService: UserService,
+    private configService: ConfigService,
+  ) {
     super({
       jwtFromRequest: ExtractJwt.fromExtractors([
         (request: Request) => {
@@ -29,7 +33,7 @@ export class JwtStrategy extends PassportStrategy(Strategy, 'jwt') {
           return ATCookie;
         },
       ]),
-      secretOrKey: process.env.JWT_SECRET,
+      secretOrKey: configService.get('JWT_SECRET'),
     });
   }
 

packages/hoppscotch-backend/src/auth/strategies/microsoft.strategy.ts

@@ -5,19 +5,21 @@ import { AuthService } from '../auth.service';
 import { UserService } from 'src/user/user.service';
 import * as O from 'fp-ts/Option';
 import * as E from 'fp-ts/Either';
+import { ConfigService } from '@nestjs/config';
 
 @Injectable()
 export class MicrosoftStrategy extends PassportStrategy(Strategy) {
   constructor(
     private authService: AuthService,
     private usersService: UserService,
+    private configService: ConfigService,
   ) {
     super({
-      clientID: process.env.MICROSOFT_CLIENT_ID,
+      clientID: configService.get('INFRA.MICROSOFT_CLIENT_ID'),
-      clientSecret: process.env.MICROSOFT_CLIENT_SECRET,
+      clientSecret: configService.get('INFRA.MICROSOFT_CLIENT_SECRET'),
-      callbackURL: process.env.MICROSOFT_CALLBACK_URL,
+      callbackURL: configService.get('MICROSOFT_CALLBACK_URL'),
-      scope: [process.env.MICROSOFT_SCOPE],
+      scope: [configService.get('MICROSOFT_SCOPE')],
-      tenant: process.env.MICROSOFT_TENANT,
+      tenant: configService.get('MICROSOFT_TENANT'),
       store: true,
     });
   }

packages/hoppscotch-backend/src/auth/strategies/rt-jwt.strategy.ts

@@ -14,10 +14,14 @@ import {
   USER_NOT_FOUND,
 } from 'src/errors';
 import * as O from 'fp-ts/Option';
+import { ConfigService } from '@nestjs/config';
 
 @Injectable()
 export class RTJwtStrategy extends PassportStrategy(Strategy, 'jwt-refresh') {
-  constructor(private usersService: UserService) {
+  constructor(
+    private usersService: UserService,
+    private configService: ConfigService,
+  ) {
     super({
       jwtFromRequest: ExtractJwt.fromExtractors([
         (request: Request) => {
@@ -28,7 +32,7 @@ export class RTJwtStrategy extends PassportStrategy(Strategy, 'jwt-refresh') {
           return RTCookie;
         },
       ]),
-      secretOrKey: process.env.JWT_SECRET,
+      secretOrKey: configService.get('JWT_SECRET'),
     });
   }
 

packages/hoppscotch-backend/src/errors.ts

@@ -644,3 +644,41 @@ export const SHORTCODE_INVALID_PROPERTIES_JSON =
  */
 export const SHORTCODE_PROPERTIES_NOT_FOUND =
   'shortcode/properties_not_found' as const;
+
+/**
+ * Infra Config not found
+ * (InfraConfigService)
+ */
+export const INFRA_CONFIG_NOT_FOUND = 'infra_config/not_found' as const;
+
+/**
+ * Infra Config update failed
+ * (InfraConfigService)
+ */
+export const INFRA_CONFIG_UPDATE_FAILED = 'infra_config/update_failed' as const;
+
+/**
+ * Infra Config not listed for onModuleInit creation
+ * (InfraConfigService)
+ */
+export const INFRA_CONFIG_NOT_LISTED =
+  'infra_config/properly_not_listed' as const;
+
+/**
+ * Infra Config reset failed
+ * (InfraConfigService)
+ */
+export const INFRA_CONFIG_RESET_FAILED = 'infra_config/reset_failed' as const;
+
+/**
+ * Infra Config invalid input for Config variable
+ * (InfraConfigService)
+ */
+export const INFRA_CONFIG_INVALID_INPUT = 'infra_config/invalid_input' as const;
+
+/**
+ * Error message for when the database table does not exist
+ * (InfraConfigService)
+ */
+export const DATABASE_TABLE_NOT_EXIST =
+  'Database migration not performed. Please check the FAQ for assistance: https://docs.hoppscotch.io/support/faq';

packages/hoppscotch-backend/src/infra-config/helper.ts

@@ -0,0 +1,44 @@
+import { PrismaService } from 'src/prisma/prisma.service';
+
+export enum ServiceStatus {
+  ENABLE = 'ENABLE',
+  DISABLE = 'DISABLE',
+}
+
+/**
+ * Load environment variables from the database and set them in the process
+ *
+ * @Description Fetch the 'infra_config' table from the database and return it as an object
+ * (ConfigModule will set the environment variables in the process)
+ */
+export async function loadInfraConfiguration() {
+  try {
+    const prisma = new PrismaService();
+
+    const infraConfigs = await prisma.infraConfig.findMany();
+
+    let environmentObject: Record<string, any> = {};
+    infraConfigs.forEach((infraConfig) => {
+      environmentObject[infraConfig.name] = infraConfig.value;
+    });
+
+    return { INFRA: environmentObject };
+  } catch (error) {
+    // Prisma throw error if 'Can't reach at database server' OR 'Table does not exist'
+    // Reason for not throwing error is, we want successful build during 'postinstall' and generate dist files
+    return { INFRA: {} };
+  }
+}
+
+/**
+ * Stop the app after 5 seconds
+ * (Docker will re-start the app)
+ */
+export function stopApp() {
+  console.log('Stopping app in 5 seconds...');
+
+  setTimeout(() => {
+    console.log('Stopping app now...');
+    process.kill(process.pid, 'SIGTERM');
+  }, 5000);
+}

packages/hoppscotch-backend/src/infra-config/infra-config.model.ts

@@ -0,0 +1,29 @@
+import { Field, ObjectType, registerEnumType } from '@nestjs/graphql';
+import { AuthProvider } from 'src/auth/helper';
+import { InfraConfigEnumForClient } from 'src/types/InfraConfig';
+import { ServiceStatus } from './helper';
+
+@ObjectType()
+export class InfraConfig {
+  @Field({
+    description: 'Infra Config Name',
+  })
+  name: InfraConfigEnumForClient;
+
+  @Field({
+    description: 'Infra Config Value',
+  })
+  value: string;
+}
+
+registerEnumType(InfraConfigEnumForClient, {
+  name: 'InfraConfigEnum',
+});
+
+registerEnumType(AuthProvider, {
+  name: 'AuthProvider',
+});
+
+registerEnumType(ServiceStatus, {
+  name: 'ServiceStatus',
+});

packages/hoppscotch-backend/src/infra-config/infra-config.module.ts

@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { InfraConfigService } from './infra-config.service';
+import { PrismaModule } from 'src/prisma/prisma.module';
+
+@Module({
+  imports: [PrismaModule],
+  providers: [InfraConfigService],
+  exports: [InfraConfigService],
+})
+export class InfraConfigModule {}

packages/hoppscotch-backend/src/infra-config/infra-config.service.spec.ts

@@ -0,0 +1,109 @@
+import { mockDeep, mockReset } from 'jest-mock-extended';
+import { PrismaService } from 'src/prisma/prisma.service';
+import { InfraConfigService } from './infra-config.service';
+import {
+  InfraConfigEnum,
+  InfraConfigEnumForClient,
+} from 'src/types/InfraConfig';
+import { INFRA_CONFIG_NOT_FOUND, INFRA_CONFIG_UPDATE_FAILED } from 'src/errors';
+import { ConfigService } from '@nestjs/config';
+import * as helper from './helper';
+
+const mockPrisma = mockDeep<PrismaService>();
+const mockConfigService = mockDeep<ConfigService>();
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const infraConfigService = new InfraConfigService(
+  mockPrisma,
+  mockConfigService,
+);
+
+beforeEach(() => {
+  mockReset(mockPrisma);
+});
+
+describe('InfraConfigService', () => {
+  describe('update', () => {
+    it('should update the infra config', async () => {
+      const name = InfraConfigEnum.GOOGLE_CLIENT_ID;
+      const value = 'true';
+
+      mockPrisma.infraConfig.update.mockResolvedValueOnce({
+        id: '',
+        name,
+        value,
+        active: true,
+        createdOn: new Date(),
+        updatedOn: new Date(),
+      });
+      jest.spyOn(helper, 'stopApp').mockReturnValueOnce();
+
+      const result = await infraConfigService.update(name, value);
+      expect(result).toEqualRight({ name, value });
+    });
+
+    it('should pass correct params to prisma update', async () => {
+      const name = InfraConfigEnum.GOOGLE_CLIENT_ID;
+      const value = 'true';
+
+      jest.spyOn(helper, 'stopApp').mockReturnValueOnce();
+
+      await infraConfigService.update(name, value);
+
+      expect(mockPrisma.infraConfig.update).toHaveBeenCalledWith({
+        where: { name },
+        data: { value },
+      });
+      expect(mockPrisma.infraConfig.update).toHaveBeenCalledTimes(1);
+    });
+
+    it('should throw an error if the infra config update failed', async () => {
+      const name = InfraConfigEnum.GOOGLE_CLIENT_ID;
+      const value = 'true';
+
+      mockPrisma.infraConfig.update.mockRejectedValueOnce('null');
+
+      const result = await infraConfigService.update(name, value);
+      expect(result).toEqualLeft(INFRA_CONFIG_UPDATE_FAILED);
+    });
+  });
+
+  describe('get', () => {
+    it('should get the infra config', async () => {
+      const name = InfraConfigEnumForClient.GOOGLE_CLIENT_ID;
+      const value = 'true';
+
+      mockPrisma.infraConfig.findUniqueOrThrow.mockResolvedValueOnce({
+        id: '',
+        name,
+        value,
+        active: true,
+        createdOn: new Date(),
+        updatedOn: new Date(),
+      });
+      const result = await infraConfigService.get(name);
+      expect(result).toEqualRight({ name, value });
+    });
+
+    it('should pass correct params to prisma findUnique', async () => {
+      const name = InfraConfigEnumForClient.GOOGLE_CLIENT_ID;
+
+      await infraConfigService.get(name);
+
+      expect(mockPrisma.infraConfig.findUniqueOrThrow).toHaveBeenCalledWith({
+        where: { name },
+      });
+      expect(mockPrisma.infraConfig.findUniqueOrThrow).toHaveBeenCalledTimes(1);
+    });
+
+    it('should throw an error if the infra config does not exist', async () => {
+      const name = InfraConfigEnumForClient.GOOGLE_CLIENT_ID;
+
+      mockPrisma.infraConfig.findUniqueOrThrow.mockRejectedValueOnce('null');
+
+      const result = await infraConfigService.get(name);
+      expect(result).toEqualLeft(INFRA_CONFIG_NOT_FOUND);
+    });
+  });
+});

packages/hoppscotch-backend/src/infra-config/infra-config.service.ts

@@ -0,0 +1,312 @@
+import { Injectable, OnModuleInit } from '@nestjs/common';
+import { InfraConfig } from './infra-config.model';
+import { PrismaService } from 'src/prisma/prisma.service';
+import { InfraConfig as DBInfraConfig } from '@prisma/client';
+import * as E from 'fp-ts/Either';
+import {
+  InfraConfigEnum,
+  InfraConfigEnumForClient,
+} from 'src/types/InfraConfig';
+import {
+  AUTH_PROVIDER_NOT_SPECIFIED,
+  DATABASE_TABLE_NOT_EXIST,
+  INFRA_CONFIG_INVALID_INPUT,
+  INFRA_CONFIG_NOT_FOUND,
+  INFRA_CONFIG_NOT_LISTED,
+  INFRA_CONFIG_RESET_FAILED,
+  INFRA_CONFIG_UPDATE_FAILED,
+} from 'src/errors';
+import { throwErr, validateEmail, validateSMTPUrl } from 'src/utils';
+import { ConfigService } from '@nestjs/config';
+import { ServiceStatus, stopApp } from './helper';
+import { EnableAndDisableSSOArgs, InfraConfigArgs } from './input-args';
+
+@Injectable()
+export class InfraConfigService implements OnModuleInit {
+  constructor(
+    private readonly prisma: PrismaService,
+    private readonly configService: ConfigService,
+  ) {}
+
+  async onModuleInit() {
+    await this.initializeInfraConfigTable();
+  }
+
+  getDefaultInfraConfigs(): { name: InfraConfigEnum; value: string }[] {
+    // Prepare rows for 'infra_config' table with default values (from .env) for each 'name'
+    const infraConfigDefaultObjs: { name: InfraConfigEnum; value: string }[] = [
+      {
+        name: InfraConfigEnum.MAILER_SMTP_URL,
+        value: process.env.MAILER_SMTP_URL,
+      },
+      {
+        name: InfraConfigEnum.MAILER_ADDRESS_FROM,
+        value: process.env.MAILER_ADDRESS_FROM,
+      },
+      {
+        name: InfraConfigEnum.GOOGLE_CLIENT_ID,
+        value: process.env.GOOGLE_CLIENT_ID,
+      },
+      {
+        name: InfraConfigEnum.GOOGLE_CLIENT_SECRET,
+        value: process.env.GOOGLE_CLIENT_SECRET,
+      },
+      {
+        name: InfraConfigEnum.GITHUB_CLIENT_ID,
+        value: process.env.GITHUB_CLIENT_ID,
+      },
+      {
+        name: InfraConfigEnum.GITHUB_CLIENT_SECRET,
+        value: process.env.GITHUB_CLIENT_SECRET,
+      },
+      {
+        name: InfraConfigEnum.MICROSOFT_CLIENT_ID,
+        value: process.env.MICROSOFT_CLIENT_ID,
+      },
+      {
+        name: InfraConfigEnum.MICROSOFT_CLIENT_SECRET,
+        value: process.env.MICROSOFT_CLIENT_SECRET,
+      },
+      {
+        name: InfraConfigEnum.VITE_ALLOWED_AUTH_PROVIDERS,
+        value: process.env.VITE_ALLOWED_AUTH_PROVIDERS.toLocaleUpperCase(),
+      },
+    ];
+
+    return infraConfigDefaultObjs;
+  }
+
+  /**
+   * Initialize the 'infra_config' table with values from .env
+   * @description This function create rows 'infra_config' in very first time (only once)
+   */
+  async initializeInfraConfigTable() {
+    try {
+      // Get all the 'names' of the properties to be saved in the 'infra_config' table
+      const enumValues = Object.values(InfraConfigEnum);
+
+      // Fetch the default values (value in .env) for configs to be saved in 'infra_config' table
+      const infraConfigDefaultObjs = this.getDefaultInfraConfigs();
+
+      // Check if all the 'names' are listed in the default values
+      if (enumValues.length !== infraConfigDefaultObjs.length) {
+        throw new Error(INFRA_CONFIG_NOT_LISTED);
+      }
+
+      // Eliminate the rows (from 'infraConfigDefaultObjs') that are already present in the database table
+      const dbInfraConfigs = await this.prisma.infraConfig.findMany();
+      const propsToInsert = infraConfigDefaultObjs.filter(
+        (p) => !dbInfraConfigs.find((e) => e.name === p.name),
+      );
+
+      if (propsToInsert.length > 0) {
+        await this.prisma.infraConfig.createMany({ data: propsToInsert });
+        stopApp();
+      }
+    } catch (error) {
+      if (error.code === 'P1001') {
+        // Prisma error code for 'Can't reach at database server'
+        // We're not throwing error here because we want to allow the app to run 'pnpm install'
+      } else if (error.code === 'P2021') {
+        // Prisma error code for 'Table does not exist'
+        throwErr(DATABASE_TABLE_NOT_EXIST);
+      } else {
+        throwErr(error);
+      }
+    }
+  }
+
+  /**
+   * Typecast a database InfraConfig to a InfraConfig model
+   * @param dbInfraConfig database InfraConfig
+   * @returns InfraConfig model
+   */
+  cast(dbInfraConfig: DBInfraConfig) {
+    return <InfraConfig>{
+      name: dbInfraConfig.name,
+      value: dbInfraConfig.value,
+    };
+  }
+
+  /**
+   * Update InfraConfig by name
+   * @param name Name of the InfraConfig
+   * @param value Value of the InfraConfig
+   * @returns InfraConfig model
+   */
+  async update(
+    name: InfraConfigEnumForClient | InfraConfigEnum,
+    value: string,
+  ) {
+    const isValidate = this.validateEnvValues([{ name, value }]);
+    if (E.isLeft(isValidate)) return E.left(isValidate.left);
+
+    try {
+      const infraConfig = await this.prisma.infraConfig.update({
+        where: { name },
+        data: { value },
+      });
+
+      stopApp();
+
+      return E.right(this.cast(infraConfig));
+    } catch (e) {
+      return E.left(INFRA_CONFIG_UPDATE_FAILED);
+    }
+  }
+
+  /**
+   * Update InfraConfigs by name
+   * @param infraConfigs InfraConfigs to update
+   * @returns InfraConfig model
+   */
+  async updateMany(infraConfigs: InfraConfigArgs[]) {
+    const isValidate = this.validateEnvValues(infraConfigs);
+    if (E.isLeft(isValidate)) return E.left(isValidate.left);
+
+    try {
+      await this.prisma.$transaction(async (tx) => {
+        for (let i = 0; i < infraConfigs.length; i++) {
+          await tx.infraConfig.update({
+            where: { name: infraConfigs[i].name },
+            data: { value: infraConfigs[i].value },
+          });
+        }
+      });
+
+      stopApp();
+
+      return E.right(infraConfigs);
+    } catch (e) {
+      return E.left(INFRA_CONFIG_UPDATE_FAILED);
+    }
+  }
+
+  /**
+   * Enable or Disable SSO for login/signup
+   * @param provider Auth Provider to enable or disable
+   * @param status Status to enable or disable
+   * @returns Either true or an error
+   */
+  async enableAndDisableSSO(providerInfo: EnableAndDisableSSOArgs[]) {
+    const allowedAuthProviders = this.configService
+      .get<string>('INFRA.VITE_ALLOWED_AUTH_PROVIDERS')
+      .split(',');
+
+    let updatedAuthProviders = allowedAuthProviders;
+
+    providerInfo.forEach(({ provider, status }) => {
+      if (status === ServiceStatus.ENABLE) {
+        updatedAuthProviders.push(provider);
+      } else if (status === ServiceStatus.DISABLE) {
+        updatedAuthProviders = updatedAuthProviders.filter(
+          (p) => p !== provider,
+        );
+      }
+    });
+
+    updatedAuthProviders = [...new Set(updatedAuthProviders)];
+
+    if (updatedAuthProviders.length === 0) {
+      return E.left(AUTH_PROVIDER_NOT_SPECIFIED);
+    }
+
+    const isUpdated = await this.update(
+      InfraConfigEnum.VITE_ALLOWED_AUTH_PROVIDERS,
+      updatedAuthProviders.join(','),
+    );
+    if (E.isLeft(isUpdated)) return E.left(isUpdated.left);
+
+    return E.right(true);
+  }
+
+  /**
+   * Get InfraConfig by name
+   * @param name Name of the InfraConfig
+   * @returns InfraConfig model
+   */
+  async get(name: InfraConfigEnumForClient) {
+    try {
+      const infraConfig = await this.prisma.infraConfig.findUniqueOrThrow({
+        where: { name },
+      });
+
+      return E.right(this.cast(infraConfig));
+    } catch (e) {
+      return E.left(INFRA_CONFIG_NOT_FOUND);
+    }
+  }
+
+  /**
+   * Get InfraConfigs by names
+   * @param names Names of the InfraConfigs
+   * @returns InfraConfig model
+   */
+  async getMany(names: InfraConfigEnumForClient[]) {
+    try {
+      const infraConfigs = await this.prisma.infraConfig.findMany({
+        where: { name: { in: names } },
+      });
+
+      return E.right(infraConfigs.map((p) => this.cast(p)));
+    } catch (e) {
+      return E.left(INFRA_CONFIG_NOT_FOUND);
+    }
+  }
+
+  /**
+   * Get allowed auth providers for login/signup
+   * @returns string[]
+   */
+  getAllowedAuthProviders() {
+    return this.configService
+      .get<string>('INFRA.VITE_ALLOWED_AUTH_PROVIDERS')
+      .split(',');
+  }
+
+  /**
+   * Reset all the InfraConfigs to their default values (from .env)
+   */
+  async reset() {
+    try {
+      const infraConfigDefaultObjs = this.getDefaultInfraConfigs();
+
+      await this.prisma.infraConfig.deleteMany({
+        where: { name: { in: infraConfigDefaultObjs.map((p) => p.name) } },
+      });
+      await this.prisma.infraConfig.createMany({
+        data: infraConfigDefaultObjs,
+      });
+
+      stopApp();
+
+      return E.right(true);
+    } catch (e) {
+      return E.left(INFRA_CONFIG_RESET_FAILED);
+    }
+  }
+
+  validateEnvValues(
+    infraConfigs: {
+      name: InfraConfigEnumForClient | InfraConfigEnum;
+      value: string;
+    }[],
+  ) {
+    for (let i = 0; i < infraConfigs.length; i++) {
+      switch (infraConfigs[i].name) {
+        case InfraConfigEnumForClient.MAILER_SMTP_URL:
+          const isValidUrl = validateSMTPUrl(infraConfigs[i].value);
+          if (!isValidUrl) return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
+        case InfraConfigEnumForClient.MAILER_ADDRESS_FROM:
+          const isValidEmail = validateEmail(infraConfigs[i].value);
+          if (!isValidEmail) return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
+        default:
+          break;
+      }
+    }
+
+    return E.right(true);
+  }
+}

packages/hoppscotch-backend/src/infra-config/input-args.ts

@@ -0,0 +1,30 @@
+import { Field, InputType } from '@nestjs/graphql';
+import { InfraConfigEnumForClient } from 'src/types/InfraConfig';
+import { ServiceStatus } from './helper';
+import { AuthProvider } from 'src/auth/helper';
+
+@InputType()
+export class InfraConfigArgs {
+  @Field(() => InfraConfigEnumForClient, {
+    description: 'Infra Config Name',
+  })
+  name: InfraConfigEnumForClient;
+
+  @Field({
+    description: 'Infra Config Value',
+  })
+  value: string;
+}
+
+@InputType()
+export class EnableAndDisableSSOArgs {
+  @Field(() => AuthProvider, {
+    description: 'Auth Provider',
+  })
+  provider: AuthProvider;
+
+  @Field(() => ServiceStatus, {
+    description: 'Auth Provider Status',
+  })
+  status: ServiceStatus;
+}

packages/hoppscotch-backend/src/mailer/mailer.module.ts

@@ -1,4 +1,4 @@
-import { Module } from '@nestjs/common';
+import { Global, Module } from '@nestjs/common';
 import { MailerModule as NestMailerModule } from '@nestjs-modules/mailer';
 import { HandlebarsAdapter } from '@nestjs-modules/mailer/dist/adapters/handlebars.adapter';
 import { MailerService } from './mailer.service';
@@ -7,24 +7,42 @@ import {
   MAILER_FROM_ADDRESS_UNDEFINED,
   MAILER_SMTP_URL_UNDEFINED,
 } from 'src/errors';
+import { ConfigService } from '@nestjs/config';
+import { loadInfraConfiguration } from 'src/infra-config/helper';
 
+@Global()
 @Module({
-  imports: [
+  imports: [],
-    NestMailerModule.forRoot({
-      transport:
-        process.env.MAILER_SMTP_URL ?? throwErr(MAILER_SMTP_URL_UNDEFINED),
-      defaults: {
-        from:
-          process.env.MAILER_ADDRESS_FROM ??
-          throwErr(MAILER_FROM_ADDRESS_UNDEFINED),
-      },
-      template: {
-        dir: __dirname + '/templates',
-        adapter: new HandlebarsAdapter(),
-      },
-    }),
-  ],
   providers: [MailerService],
   exports: [MailerService],
 })
-export class MailerModule {}
+export class MailerModule {
+  static async register() {
+    const env = await loadInfraConfiguration();
+
+    let mailerSmtpUrl = env.INFRA.MAILER_SMTP_URL;
+    let mailerAddressFrom = env.INFRA.MAILER_ADDRESS_FROM;
+
+    if (!env.INFRA.MAILER_SMTP_URL || !env.INFRA.MAILER_ADDRESS_FROM) {
+      const config = new ConfigService();
+      mailerSmtpUrl = config.get('MAILER_SMTP_URL');
+      mailerAddressFrom = config.get('MAILER_ADDRESS_FROM');
+    }
+
+    return {
+      module: MailerModule,
+      imports: [
+        NestMailerModule.forRoot({
+          transport: mailerSmtpUrl ?? throwErr(MAILER_SMTP_URL_UNDEFINED),
+          defaults: {
+            from: mailerAddressFrom ?? throwErr(MAILER_FROM_ADDRESS_UNDEFINED),
+          },
+          template: {
+            dir: __dirname + '/templates',
+            adapter: new HandlebarsAdapter(),
+          },
+        }),
+      ],
+    };
+  }
+}

packages/hoppscotch-backend/src/main.ts

@@ -6,18 +6,23 @@ import { VersioningType } from '@nestjs/common';
 import * as session from 'express-session';
 import { emitGQLSchemaFile } from './gql-schema';
 import { checkEnvironmentAuthProvider } from './utils';
+import { ConfigService } from '@nestjs/config';
 
 async function bootstrap() {
-  console.log(`Running in production: ${process.env.PRODUCTION}`);
-  console.log(`Port: ${process.env.PORT}`);
-
-  checkEnvironmentAuthProvider();
-
   const app = await NestFactory.create(AppModule);
 
+  const configService = app.get(ConfigService);
+
+  console.log(`Running in production:  ${configService.get('PRODUCTION')}`);
+  console.log(`Port: ${configService.get('PORT')}`);
+
+  checkEnvironmentAuthProvider(
+    configService.get('VITE_ALLOWED_AUTH_PROVIDERS'),
+  );
+
   app.use(
     session({
-      secret: process.env.SESSION_SECRET,
+      secret: configService.get('SESSION_SECRET'),
     }),
   );
 
@@ -28,18 +33,18 @@ async function bootstrap() {
     }),
   );
 
-  if (process.env.PRODUCTION === 'false') {
+  if (configService.get('PRODUCTION') === 'false') {
     console.log('Enabling CORS with development settings');
 
     app.enableCors({
-      origin: process.env.WHITELISTED_ORIGINS.split(','),
+      origin: configService.get('WHITELISTED_ORIGINS').split(','),
       credentials: true,
     });
   } else {
     console.log('Enabling CORS with production settings');
 
     app.enableCors({
-      origin: process.env.WHITELISTED_ORIGINS.split(','),
+      origin: configService.get('WHITELISTED_ORIGINS').split(','),
       credentials: true,
     });
   }
@@ -47,7 +52,13 @@ async function bootstrap() {
     type: VersioningType.URI,
   });
   app.use(cookieParser());
-  await app.listen(process.env.PORT || 3170);
+  await app.listen(configService.get('PORT') || 3170);
+
+  // Graceful shutdown
+  process.on('SIGTERM', async () => {
+    console.info('SIGTERM signal received');
+    await app.close();
+  });
 }
 
 if (!process.env.GENERATE_GQL_SCHEMA) {

packages/hoppscotch-backend/src/shortcode/shortcode.service.spec.ts

@@ -504,20 +504,24 @@ describe('ShortcodeService', () => {
       );
       expect(result).toEqual(<ShortcodeWithUserEmail[]>[
         {
-          id: shortcodes[0].id,
+          id: shortcodesWithUserEmail[0].id,
-          request: JSON.stringify(shortcodes[0].request),
+          request: JSON.stringify(shortcodesWithUserEmail[0].request),
-          properties: JSON.stringify(shortcodes[0].embedProperties),
+          properties: JSON.stringify(
-          createdOn: shortcodes[0].createdOn,
+            shortcodesWithUserEmail[0].embedProperties,
+          ),
+          createdOn: shortcodesWithUserEmail[0].createdOn,
           creator: {
             uid: user.uid,
             email: user.email,
           },
         },
         {
-          id: shortcodes[1].id,
+          id: shortcodesWithUserEmail[1].id,
-          request: JSON.stringify(shortcodes[1].request),
+          request: JSON.stringify(shortcodesWithUserEmail[1].request),
-          properties: JSON.stringify(shortcodes[1].embedProperties),
+          properties: JSON.stringify(
-          createdOn: shortcodes[1].createdOn,
+            shortcodesWithUserEmail[1].embedProperties,
+          ),
+          createdOn: shortcodesWithUserEmail[1].createdOn,
           creator: {
             uid: user.uid,
             email: user.email,

packages/hoppscotch-backend/src/team-invitation/team-invitation.module.ts

@@ -1,5 +1,4 @@
 import { Module } from '@nestjs/common';
-import { MailerModule } from 'src/mailer/mailer.module';
 import { PrismaModule } from 'src/prisma/prisma.module';
 import { PubSubModule } from 'src/pubsub/pubsub.module';
 import { TeamModule } from 'src/team/team.module';
@@ -12,7 +11,7 @@ import { TeamInviteeGuard } from './team-invitee.guard';
 import { TeamTeamInviteExtResolver } from './team-teaminvite-ext.resolver';
 
 @Module({
-  imports: [PrismaModule, TeamModule, PubSubModule, UserModule, MailerModule],
+  imports: [PrismaModule, TeamModule, PubSubModule, UserModule],
   providers: [
     TeamInvitationService,
     TeamInvitationResolver,

packages/hoppscotch-backend/src/team-invitation/team-invitation.service.ts

@@ -20,6 +20,7 @@ import { UserService } from 'src/user/user.service';
 import { PubSubService } from 'src/pubsub/pubsub.service';
 import { validateEmail } from '../utils';
 import { AuthUser } from 'src/types/AuthUser';
+import { ConfigService } from '@nestjs/config';
 
 @Injectable()
 export class TeamInvitationService {
@@ -28,8 +29,8 @@ export class TeamInvitationService {
     private readonly userService: UserService,
     private readonly teamService: TeamService,
     private readonly mailerService: MailerService,
-
     private readonly pubsub: PubSubService,
+    private readonly configService: ConfigService,
   ) {}
 
   /**
@@ -150,7 +151,9 @@ export class TeamInvitationService {
       template: 'team-invitation',
       variables: {
         invitee: creator.displayName ?? 'A Hoppscotch User',
-        action_url: `${process.env.VITE_BASE_URL}/join-team?id=${dbInvitation.id}`,
+        action_url: `${this.configService.get('VITE_BASE_URL')}/join-team?id=${
+          dbInvitation.id
+        }`,
         invite_team_name: team.name,
       },
     });

packages/hoppscotch-backend/src/types/InfraConfig.ts

@@ -0,0 +1,29 @@
+export enum InfraConfigEnum {
+  MAILER_SMTP_URL = 'MAILER_SMTP_URL',
+  MAILER_ADDRESS_FROM = 'MAILER_ADDRESS_FROM',
+
+  GOOGLE_CLIENT_ID = 'GOOGLE_CLIENT_ID',
+  GOOGLE_CLIENT_SECRET = 'GOOGLE_CLIENT_SECRET',
+
+  GITHUB_CLIENT_ID = 'GITHUB_CLIENT_ID',
+  GITHUB_CLIENT_SECRET = 'GITHUB_CLIENT_SECRET',
+
+  MICROSOFT_CLIENT_ID = 'MICROSOFT_CLIENT_ID',
+  MICROSOFT_CLIENT_SECRET = 'MICROSOFT_CLIENT_SECRET',
+
+  VITE_ALLOWED_AUTH_PROVIDERS = 'VITE_ALLOWED_AUTH_PROVIDERS',
+}
+
+export enum InfraConfigEnumForClient {
+  MAILER_SMTP_URL = 'MAILER_SMTP_URL',
+  MAILER_ADDRESS_FROM = 'MAILER_ADDRESS_FROM',
+
+  GOOGLE_CLIENT_ID = 'GOOGLE_CLIENT_ID',
+  GOOGLE_CLIENT_SECRET = 'GOOGLE_CLIENT_SECRET',
+
+  GITHUB_CLIENT_ID = 'GITHUB_CLIENT_ID',
+  GITHUB_CLIENT_SECRET = 'GITHUB_CLIENT_SECRET',
+
+  MICROSOFT_CLIENT_ID = 'MICROSOFT_CLIENT_ID',
+  MICROSOFT_CLIENT_SECRET = 'MICROSOFT_CLIENT_SECRET',
+}

packages/hoppscotch-backend/src/utils.ts

@@ -131,6 +131,26 @@ export const validateEmail = (email: string) => {
   ).test(email);
 };
 
+/**
+ * Checks to see if the URL is valid or not
+ * @param url The URL to validate
+ * @returns boolean
+ */
+export const validateSMTPUrl = (url: string) => {
+  // Possible valid formats
+  // smtp(s)://mail.example.com
+  // smtp(s)://user:pass@mail.example.com
+  // smtp(s)://mail.example.com:587
+  // smtp(s)://user:pass@mail.example.com:587
+
+  if (!url || url.length === 0) return false;
+
+  const regex =
+    /^(smtp|smtps):\/\/(?:([^:]+):([^@]+)@)?((?!\.)[^:]+)(?::(\d+))?$/;
+  if (regex.test(url)) return true;
+  return false;
+};
+
 /**
  * String to JSON parser
  * @param {str} str The string to parse
@@ -161,21 +181,23 @@ export function isValidLength(title: string, length: number) {
 
 /**
  * This function is called by bootstrap() in main.ts
- *  It checks if the "VITE_ALLOWED_AUTH_PROVIDERS" environment variable is properly set or not.
+ * It checks if the "VITE_ALLOWED_AUTH_PROVIDERS" environment variable is properly set or not.
  * If not, it throws an error.
  */
-export function checkEnvironmentAuthProvider() {
+export function checkEnvironmentAuthProvider(
-  if (!process.env.hasOwnProperty('VITE_ALLOWED_AUTH_PROVIDERS')) {
+  VITE_ALLOWED_AUTH_PROVIDERS: string,
+) {
+  if (!VITE_ALLOWED_AUTH_PROVIDERS) {
     throw new Error(ENV_NOT_FOUND_KEY_AUTH_PROVIDERS);
   }
 
-  if (process.env.VITE_ALLOWED_AUTH_PROVIDERS === '') {
+  if (VITE_ALLOWED_AUTH_PROVIDERS === '') {
     throw new Error(ENV_EMPTY_AUTH_PROVIDERS);
   }
 
-  const givenAuthProviders = process.env.VITE_ALLOWED_AUTH_PROVIDERS.split(
+  const givenAuthProviders = VITE_ALLOWED_AUTH_PROVIDERS.split(',').map(
-    ',',
+    (provider) => provider.toLocaleUpperCase(),
-  ).map((provider) => provider.toLocaleUpperCase());
+  );
   const supportedAuthProviders = Object.values(AuthProvider).map(
     (provider: string) => provider.toLocaleUpperCase(),
   );

packages/hoppscotch-cli/src/types/collections.ts

@@ -1,8 +1,8 @@
-import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data";
+import { HoppCollection } from "@hoppscotch/data";
 import { HoppEnvs } from "./request";
 
 export type CollectionRunnerParam = {
-  collections: HoppCollection<HoppRESTRequest>[];
+  collections: HoppCollection[];
   envs: HoppEnvs;
   delay?: number;
 };

packages/hoppscotch-cli/src/types/request.ts

@@ -33,7 +33,7 @@ export type HoppEnvs = {
 
 export type CollectionStack = {
   path: string;
-  collection: HoppCollection<HoppRESTRequest>;
+  collection: HoppCollection;
 };
 
 export type RequestReport = {

packages/hoppscotch-cli/src/utils/checks.ts

@@ -1,8 +1,4 @@
-import {
+import { HoppCollection, isHoppRESTRequest } from "@hoppscotch/data";
-  HoppCollection,
-  HoppRESTRequest,
-  isHoppRESTRequest,
-} from "@hoppscotch/data";
 import * as A from "fp-ts/Array";
 import { CommanderError } from "commander";
 import { HoppCLIError, HoppErrnoException } from "../types/errors";
@@ -24,9 +20,7 @@ export const hasProperty = <P extends PropertyKey>(
  * @returns True, if unknown parameter is valid Hoppscotch REST Collection;
  * False, otherwise.
  */
-export const isRESTCollection = (
+export const isRESTCollection = (param: unknown): param is HoppCollection => {
-  param: unknown
-): param is HoppCollection<HoppRESTRequest> => {
   if (!!param && typeof param === "object") {
     if (!hasProperty(param, "v") || typeof param.v !== "number") {
       return false;
@@ -62,7 +56,6 @@ export const isRESTCollection = (
   return false;
 };
 
-
 /**
  * Checks if given error data is of type HoppCLIError, based on existence
  * of code property.

packages/hoppscotch-cli/src/utils/collections.ts

@@ -3,7 +3,7 @@ import { pipe } from "fp-ts/function";
 import { bold } from "chalk";
 import { log } from "console";
 import round from "lodash/round";
-import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data";
+import { HoppCollection } from "@hoppscotch/data";
 import {
   HoppEnvs,
   CollectionStack,
@@ -41,58 +41,58 @@ const { WARN, FAIL } = exceptionColors;
  * @param param Data of hopp-collection with hopp-requests, envs to be processed.
  * @returns List of report for each processed request.
  */
-export const collectionsRunner =
+export const collectionsRunner = async (
-  async (param: CollectionRunnerParam): Promise<RequestReport[]> =>
+  param: CollectionRunnerParam
-   {
+): Promise<RequestReport[]> => {
-    const envs: HoppEnvs = param.envs;
+  const envs: HoppEnvs = param.envs;
-    const delay = param.delay ?? 0;
+  const delay = param.delay ?? 0;
-    const requestsReport: RequestReport[] = [];
+  const requestsReport: RequestReport[] = [];
-    const collectionStack: CollectionStack[] = getCollectionStack(
+  const collectionStack: CollectionStack[] = getCollectionStack(
-      param.collections
+    param.collections
-    );
+  );
 
-    while (collectionStack.length) {
+  while (collectionStack.length) {
-      // Pop out top-most collection from stack to be processed.
+    // Pop out top-most collection from stack to be processed.
-      const { collection, path } = <CollectionStack>collectionStack.pop();
+    const { collection, path } = <CollectionStack>collectionStack.pop();
 
-      // Processing each request in collection
+    // Processing each request in collection
-      for (const request of collection.requests) {
+    for (const request of collection.requests) {
-        const _request = preProcessRequest(request);
+      const _request = preProcessRequest(request);
-        const requestPath = `${path}/${_request.name}`;
+      const requestPath = `${path}/${_request.name}`;
-        const processRequestParams: ProcessRequestParams = {
+      const processRequestParams: ProcessRequestParams = {
-          path: requestPath,
+        path: requestPath,
-          request: _request,
+        request: _request,
-          envs,
+        envs,
-          delay,
+        delay,
-        };
+      };
 
-        // Request processing initiated message.
+      // Request processing initiated message.
-        log(WARN(`\nRunning: ${bold(requestPath)}`));
+      log(WARN(`\nRunning: ${bold(requestPath)}`));
 
-        // Processing current request.
+      // Processing current request.
-        const result = await processRequest(processRequestParams)();
+      const result = await processRequest(processRequestParams)();
 
-        // Updating global & selected envs with new envs from processed-request output.
+      // Updating global & selected envs with new envs from processed-request output.
-        const { global, selected } = result.envs;
+      const { global, selected } = result.envs;
-        envs.global = global;
+      envs.global = global;
-        envs.selected = selected;
+      envs.selected = selected;
 
-        // Storing current request's report.
+      // Storing current request's report.
-        const requestReport = result.report;
+      const requestReport = result.report;
-        requestsReport.push(requestReport);
+      requestsReport.push(requestReport);
-      }
-
-      // Pushing remaining folders realted collection to stack.
-      for (const folder of collection.folders) {
-        collectionStack.push({
-          path: `${path}/${folder.name}`,
-          collection: folder,
-        });
-      }
     }
 
-    return requestsReport;
+    // Pushing remaining folders realted collection to stack.
-  };
+    for (const folder of collection.folders) {
+      collectionStack.push({
+        path: `${path}/${folder.name}`,
+        collection: folder,
+      });
+    }
+  }
+
+  return requestsReport;
+};
 
 /**
  * Transforms collections to generate collection-stack which describes each collection's
@@ -100,9 +100,7 @@ export const collectionsRunner =
  * @param collections Hopp-collection objects to be mapped to collection-stack type.
  * @returns Mapped collections to collection-stack.
  */
-const getCollectionStack = (
+const getCollectionStack = (collections: HoppCollection[]): CollectionStack[] =>
-  collections: HoppCollection<HoppRESTRequest>[]
-): CollectionStack[] =>
   pipe(
     collections,
     A.map(

packages/hoppscotch-cli/src/utils/mutators.ts

@@ -2,7 +2,7 @@ import fs from "fs/promises";
 import { FormDataEntry } from "../types/request";
 import { error } from "../types/errors";
 import { isRESTCollection, isHoppErrnoException } from "./checks";
-import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data";
+import { HoppCollection } from "@hoppscotch/data";
 
 /**
  * Parses array of FormDataEntry to FormData.
@@ -35,20 +35,20 @@ export const parseErrorMessage = (e: unknown) => {
 };
 
 export async function readJsonFile(path: string): Promise<unknown> {
-  if(!path.endsWith('.json')) {
+  if (!path.endsWith(".json")) {
-    throw error({ code: "INVALID_FILE_TYPE", data: path })
+    throw error({ code: "INVALID_FILE_TYPE", data: path });
   }
 
   try {
-    await fs.access(path)
+    await fs.access(path);
   } catch (e) {
-    throw error({ code: "FILE_NOT_FOUND", path: path })
+    throw error({ code: "FILE_NOT_FOUND", path: path });
   }
 
   try {
-    return JSON.parse((await fs.readFile(path)).toString())
+    return JSON.parse((await fs.readFile(path)).toString());
-  } catch(e) {
+  } catch (e) {
-    throw error({ code: "UNKNOWN_ERROR", data: e })
+    throw error({ code: "UNKNOWN_ERROR", data: e });
   }
 }
 
@@ -56,22 +56,24 @@ export async function readJsonFile(path: string): Promise<unknown> {
  * Parses collection json file for given path:context.path, and validates
  * the parsed collectiona array.
  * @param path Collection json file path.
- * @returns For successful parsing we get array of HoppCollection<HoppRESTRequest>,
+ * @returns For successful parsing we get array of HoppCollection,
  */
 export async function parseCollectionData(
   path: string
-): Promise<HoppCollection<HoppRESTRequest>[]> {
+): Promise<HoppCollection[]> {
-  let contents = await readJsonFile(path)
+  let contents = await readJsonFile(path);
 
-  const maybeArrayOfCollections: unknown[] = Array.isArray(contents) ? contents : [contents]
+  const maybeArrayOfCollections: unknown[] = Array.isArray(contents)
+    ? contents
+    : [contents];
 
-  if(maybeArrayOfCollections.some((x) => !isRESTCollection(x))) {
+  if (maybeArrayOfCollections.some((x) => !isRESTCollection(x))) {
     throw error({
       code: "MALFORMED_COLLECTION",
       path,
       data: "Please check the collection data.",
-    })
+    });
   }
 
-  return maybeArrayOfCollections as HoppCollection<HoppRESTRequest>[]
+  return maybeArrayOfCollections as HoppCollection[];
-};
+}

packages/hoppscotch-common/assets/scss/styles.scss

@@ -158,7 +158,7 @@ a {
     @apply shadow-none #{!important};
     @apply fixed;
     @apply inline-flex;
-    @apply -mt-8;
+    @apply -mt-7;
   }
 }
 
@@ -368,6 +368,7 @@ pre.ace_editor {
 
 .toasted-container {
   @apply max-w-md;
+  @apply z-[10000];
 
   .toasted {
     &.toasted-primary {
@@ -516,9 +517,10 @@ pre.ace_editor {
   @apply bg-dividerLight;
   @apply rounded;
   @apply ml-2;
-  @apply px-1;
+  @apply px-0.5;
-  @apply min-w-[1.25rem];
+  @apply min-w-[1rem];
-  @apply min-h-[1.25rem];
+  @apply min-h-[1rem];
+  @apply leading-none;
   @apply items-center;
   @apply justify-center;
   @apply border border-dividerDark;

packages/hoppscotch-common/assets/themes/base-themes.scss

@@ -17,6 +17,7 @@
   --lower-tertiary-sticky-fold: 7.125rem;
   --lower-fourth-sticky-fold: 9.188rem;
   --sidebar-primary-sticky-fold: 2rem;
+  --properties-primary-sticky-fold: 2.05rem;
 }
 
 @mixin light-theme {

packages/hoppscotch-common/locales/en.json

@@ -33,6 +33,7 @@
     "open_workspace": "Open workspace",
     "paste": "Paste",
     "prettify": "Prettify",
+    "properties":"Properties",
     "remove": "Remove",
     "rename": "Rename",
     "restore": "Restore",
@@ -172,6 +173,8 @@
     "name_length_insufficient": "Collection name should be at least 3 characters long",
     "new": "New Collection",
     "order_changed": "Collection Order Updated",
+    "properties":"Colection Properties",
+    "properties_updated": "Collection Properties Updated",
     "renamed": "Collection renamed",
     "request_in_use": "Request in use",
     "save_as": "Save as",
@@ -354,6 +357,8 @@
     "offline_short": "You're using Hoppscotch offline.",
     "post_request_tests": "Test scripts are written in JavaScript, and are run after the response is received.",
     "pre_request_script": "Pre-request scripts are written in JavaScript, and are run before the request is sent.",
+    "collection_properties_authorization": " This authorization will be set for every request in this collection.",
+    "collection_properties_header": "This header will be set for every request in this collection.",
     "script_fail": "It seems there is a glitch in the pre-request script. Check the error below and fix the script accordingly.",
     "test_script_fail": "There seems to be an error with test script. Please fix the errors and run tests again",
     "tests": "Write a test script to automate debugging."
@@ -392,7 +397,8 @@
     "hoppscotch_environment": "Hoppscotch Environment",
     "hoppscotch_environment_description": "Import Hoppscotch Environment JSON file",
     "postman_environment": "Postman Environment",
-    "postman_environment_description": "Import Postman Environment JSON file",
+    "postman_environment_description": "Import Postman Environment from a JSON file",
+    "insomnia_environment_description": "Import Insomnia Environment from a JSON/YAML file",
     "environments_from_gist": "Import From Gist",
     "environments_from_gist_description": "Import Hoppscotch Environments From Gist",
     "gql_collections_from_gist_description": "Import GraphQL Collections From Gist"

packages/hoppscotch-common/package.json

@@ -50,7 +50,7 @@
     "axios": "^1.6.2",
     "buffer": "^6.0.3",
     "cookie-es": "^1.0.0",
-    "dioc": "workspace:^",
+    "dioc": "^1.0.1",
     "esprima": "^4.0.1",
     "events": "^3.3.0",
     "fp-ts": "^2.16.1",

packages/hoppscotch-common/src/components.d.ts

@@ -56,6 +56,7 @@ declare module 'vue' {
     CollectionsGraphqlRequest: typeof import('./components/collections/graphql/Request.vue')['default']
     CollectionsImportExport: typeof import('./components/collections/ImportExport.vue')['default']
     CollectionsMyCollections: typeof import('./components/collections/MyCollections.vue')['default']
+    CollectionsProperties: typeof import('./components/collections/Properties.vue')['default']
     CollectionsRequest: typeof import('./components/collections/Request.vue')['default']
     CollectionsSaveRequest: typeof import('./components/collections/SaveRequest.vue')['default']
     CollectionsTeamCollections: typeof import('./components/collections/TeamCollections.vue')['default']

packages/hoppscotch-common/src/components/app/spotlight/entry/GQLRequest.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { HoppCollection, HoppGQLRequest } from "@hoppscotch/data"
+import { HoppCollection } from "@hoppscotch/data"
 import { computed } from "vue"
 import { graphqlCollectionStore } from "~/newstore/collections"
 
@@ -28,7 +28,7 @@ const pathFolders = computed(() => {
       .slice(0, -1)
       .map((x) => parseInt(x))
 
-    const pathItems: HoppCollection<HoppGQLRequest>[] = []
+    const pathItems: HoppCollection[] = []
 
     let currentFolder =
       graphqlCollectionStore.value.state[folderIndicies.shift()!]

packages/hoppscotch-common/src/components/app/spotlight/entry/RESTRequest.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
+import { HoppCollection } from "@hoppscotch/data"
 import { computed } from "vue"
 import { restCollectionStore } from "~/newstore/collections"
 import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
@@ -36,7 +36,7 @@ const pathFolders = computed(() => {
       .slice(0, -1)
       .map((x) => parseInt(x))
 
-    const pathItems: HoppCollection<HoppRESTRequest>[] = []
+    const pathItems: HoppCollection[] = []
 
     let currentFolder = restCollectionStore.value.state[folderIndicies.shift()!]
     pathItems.push(currentFolder)

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)
+  if ((props.data as HoppCollection).name)
-    return (props.data as HoppCollection<HoppRESTRequest>).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 (
+const handleImportToStore = async (collections: HoppCollection[]) => {
-  collections: HoppCollection<HoppRESTRequest>[]
-) => {
   const importResult =
     props.collectionsType.type === "my-collections"
       ? await importToPersonalWorkspace(collections)
@@ -104,26 +101,47 @@ const handleImportToStore = async (
   }
 }
 
-const importToPersonalWorkspace = (
+const importToPersonalWorkspace = (collections: HoppCollection[]) => {
-  collections: HoppCollection<HoppRESTRequest>[]
-) => {
   appendRESTCollections(collections)
   return E.right({
     success: true,
   })
 }
 
-const importToTeamsWorkspace = async (
+function translateToTeamCollectionFormat(x: HoppCollection) {
-  collections: HoppCollection<HoppRESTRequest>[]
+  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">
+<script setup lang="ts">
-import { defineComponent } from "vue"
+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({
+const t = useI18n()
-  props: {
+const toast = useToast()
-    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
-      }
 
-      addGraphqlCollection(
+defineProps<{
-        makeCollection<HoppGQLRequest>({
+  show: boolean
-          name: this.name,
+}>()
-          folders: [],
-          requests: [],
-        })
-      )
 
-      this.hideModal()
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
 
-      platform.analytics?.logEvent({
+const name = ref<string | null>(null)
-        type: "HOPP_CREATE_COLLECTION",
+
-        isRootCollection: true,
+const addNewCollection = () => {
-        platform: "gql",
+  if (!name.value) {
-        workspaceType: "personal",
+    toast.error(`${t("collection.invalid_name")}`)
-      })
+    return
-    },
+  }
-    hideModal() {
+
-      this.name = null
+  addGraphqlCollection(
-      this.$emit("hide-modal")
+    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({
+const t = useI18n()
-  props: {
+const toast = useToast()
-    show: Boolean,
+
-    folderPath: { type: String, default: null },
+const props = defineProps<{
-    collectionIndex: { type: Number, default: null },
+  show: boolean
-  },
+  folderPath?: string
-  emits: ["hide-modal", "add-folder"],
+  collectionIndex: number
-  setup() {
+}>()
-    return {
+
-      toast: useToast(),
+const emit = defineEmits<{
-      t: useI18n(),
+  (e: "hide-modal"): void
+  (
+    e: "add-folder",
+    v: {
+      name: string
+      path: string | undefined
     }
-  },
+  ): void
-  data() {
+}>()
-    return {
-      name: null,
-    }
-  },
-  methods: {
-    addFolder() {
-      if (!this.name) {
-        this.toast.error(`${this.t("folder.name_length_insufficient")}`)
-        return
-      }
 
-      this.$emit("add-folder", {
+const name = ref<string | null>(null)
-        name: this.name,
-        path: this.folderPath || `${this.collectionIndex}`,
-      })
 
-      this.hideModal()
+const addFolder = () => {
-    },
+  if (!name.value) {
-    hideModal() {
+    toast.error(`${t("folder.name_length_insufficient")}`)
-      this.name = null
+    return
-      this.$emit("hide-modal")
+  }
-    },
+
-  },
+  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 {
+import { removeGraphqlCollection } from "~/newstore/collections"
-  removeGraphqlCollection,
-  moveGraphqlRequest,
-} 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({
+const props = defineProps<{
-  picked: { type: Object, default: null },
+  picked: Picked | null
   // Whether the viewing context is related to picking (activates 'select' events)
-  saveRequest: { type: Boolean, default: false },
+  saveRequest: boolean
-  collectionIndex: { type: Number, default: null },
+  collectionIndex: number | null
-  collection: { type: Object, default: () => ({}) },
+  collection: HoppCollection
-  isFiltered: Boolean,
+  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({
+const props = defineProps<{
-  show: Boolean,
+  show: boolean
-  editingCollection: { type: Object, default: () => ({}) },
+  editingCollectionIndex: number | null
-  editingCollectionIndex: { type: Number, default: null },
+  editingCollection: HoppCollection | null
-  editingCollectionName: { type: String, default: 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">
+<script setup lang="ts">
-import { defineComponent } from "vue"
+import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { editGraphqlFolder } from "~/newstore/collections"
 
-export default defineComponent({
+const t = useI18n()
-  props: {
+const toast = useToast()
-    show: Boolean,
+
-    folder: { type: Object, default: () => ({}) },
+const props = defineProps<{
-    folderPath: { type: String, default: null },
+  show: boolean
-    editingFolderName: { type: String, default: null },
+  folderPath?: string
-  },
+  folder: any
-  emits: ["hide-modal"],
+  editingFolderName: string
-  setup() {
+}>()
-    return {
+
-      toast: useToast(),
+const emit = defineEmits(["hide-modal"])
-      t: useI18n(),
+
-    }
+const name = ref("")
-  },
+
-  data() {
+watch(
-    return {
+  () => props.editingFolderName,
-      name: "",
+  (val) => {
-    }
+    name.value = val
-  },
+  }
-  watch: {
+)
-    editingFolderName(val) {
+
-      this.name = val
+const editFolder = () => {
-    },
+  if (!name.value) {
-  },
+    toast.error(`${t("collection.invalid_name")}`)
-  methods: {
+    return
-    editFolder() {
+  }
-      if (!this.name) {
+  editGraphqlFolder(props.folderPath, {
-        this.toast.error(`${this.t("collection.invalid_name")}`)
+    ...(props.folder as any),
-        return
+    name: name.value,
-      }
+  })
-      editGraphqlFolder(this.folderPath, {
+  hideModal()
-        ...(this.folder as any),
+}
-        name: this.name,
+
-      })
+const hideModal = () => {
-      this.hideModal()
+  name.value = ""
-    },
+  emit("hide-modal")
-    hideModal() {
+}
-      this.name = ""
-      this.$emit("hide-modal")
-    },
-  },
-})
 </script>

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

@@ -32,61 +32,55 @@
   </HoppSmartModal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, PropType } from "vue"
+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({
+const t = useI18n()
-  props: {
+const toast = useToast()
-    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
-      }
 
-      // TODO: Type safety goes brrrr. Proper typing plz
+const props = defineProps<{
-      const requestUpdated = {
+  show: boolean
-        ...this.$props.request,
+  folderPath?: string
-        name: this.$data.requestUpdateData.name || this.$props.request.name,
+  requestIndex: number | null
-      }
+  request: HoppGQLRequest | null
+  editingRequestName: string
+}>()
 
-      editGraphqlRequest(this.folderPath, this.requestIndex, requestUpdated)
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
 
-      this.hideModal()
+const requestUpdateData = ref({ name: null as string | null })
-    },
+
-    hideModal() {
+watch(
-      this.requestUpdateData = { name: null }
+  () => props.editingRequestName,
-      this.$emit("hide-modal")
+  (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
+      <div
-        class="flex cursor-pointer items-center justify-center px-4"
+        class="flex min-w-0 flex-1 items-center justify-center cursor-pointer"
         @click="toggleShowChildren()"
       >
-        <component
+        <span class="pointer-events-none flex items-center justify-center px-4">
-          :is="collectionIcon"
+          <component
-          class="svg-icons"
+            :is="collectionIcon"
-          :class="{ 'text-accent': isSelected }"
+            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>
-      </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({
+const props = defineProps<{
-  picked: { type: Object, default: null },
+  picked: Picked
   // Whether the request is in a selectable mode (activates 'select' event)
-  saveRequest: { type: Boolean, default: false },
+  saveRequest: boolean
-  folder: { type: Object, default: () => ({}) },
+  folder: HoppCollection
-  folderIndex: { type: Number, default: null },
+  folderIndex: number
-  collectionIndex: { type: Number, default: null },
+  collectionIndex: number
-  folderPath: { type: String, default: null },
+  folderPath: string
-  isFiltered: Boolean,
+  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({
+        platform.analytics?.logEvent({
-        type: "HOPP_IMPORT_COLLECTION",
+          type: "HOPP_IMPORT_COLLECTION",
-        platform: "gql",
+          platform: "gql",
-        workspaceType: "personal",
+          workspaceType: "personal",
-        importer: "json",
+          importer: "json",
-      })
+        })
+      }
 
       emit("hide-modal")
     },
@@ -214,11 +220,9 @@ const showImportFailedError = () => {
   toast.error(t("import.failed"))
 }
 
-const handleImportToStore = async (
+const handleImportToStore = async (gqlCollections: HoppCollection[]) => {
-  gqlCollections: HoppCollection<HoppGQLRequest>[]
+  appendGraphqlCollections(gqlCollections)
-) => {
+  toast.success(t("state.file_imported"))
-  setGraphqlCollections(gqlCollections)
-  toast.success(t("import.success"))
 }
 
 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
+      <div
-        class="flex w-16 cursor-pointer items-center justify-center truncate px-2"
+        class="pointer-events-auto flex min-w-0 flex-1 cursor-pointer items-center justify-center"
         @click="selectRequest()"
       >
-        <component
+        <span
-          :is="isSelected ? IconCheckCircle : IconFile"
+          class="pointer-events-none flex w-8 items-center justify-center truncate px-6"
-          class="svg-icons"
+        >
-          :class="{ 'text-accent': isSelected }"
+          <component
-        />
+            :is="isSelected ? IconCheckCircle : IconFile"
-      </span>
+            class="svg-icons"
-      <span
+            :class="{ 'text-accent': isSelected }"
-        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>
         <span
-          v-if="isActive"
+          class="pointer-events-none flex min-w-0 flex-1 items-center py-2 pr-2 transition group-hover:text-secondaryDark"
-          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
+          <span class="truncate" :class="{ 'text-accent': isSelected }">
-            class="absolute inline-flex h-full w-full flex-shrink-0 animate-ping rounded-full bg-green-500 opacity-75"
+            {{ request.name }}
-          >
           </span>
           <span
-            class="relative inline-flex h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500"
+            v-if="isActive"
-          ></span>
+            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 { HoppGQLRequest } from "@hoppscotch/data"
-import { cloneDeep } from "lodash-es"
 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({
+    emit("select-request", {
-      originLocation: "user-collection",
+      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">
+<script setup lang="ts">
-// TODO: TypeScript + Script Setup this :)
+import { nextTick, ref } from "vue"
-import { defineComponent } from "vue"
+import { clone, cloneDeep } from "lodash-es"
-import { cloneDeep, clone } 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({
+const t = useI18n()
-  props: {
+const toast = useToast()
-    // 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)
 
-    return {
+defineProps<{
-      collections,
+  // Whether to activate the ability to pick items (activates 'select' events)
-      colorMode,
+  saveRequest: boolean
-      t,
+  picked: Picked
-      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)
 
-      if (!this.filterText) return collections
+const collections = useReadonlyStream(graphqlCollections$, [], "deep")
+const colorMode = useColorMode()
+const tabs = useService(GQLTabService)
 
-      const filterText = this.filterText.toLowerCase()
+const showModalAdd = ref(false)
-      const filteredCollections = []
+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 editingCollection = ref<HoppCollection | null>(null)
-        const filteredRequests = []
+const editingCollectionIndex = ref<number | null>(null)
-        const filteredFolders = []
+const editingFolder = ref<HoppCollection | null>(null)
-        for (const request of collection.requests) {
+const editingFolderName = ref("")
-          if (request.name.toLowerCase().includes(filterText))
+const editingFolderIndex = ref<number | null>(null)
-            filteredRequests.push(request)
+const editingFolderPath = ref("")
-        }
+const editingRequest = ref<HoppGQLRequest | null>(null)
-        for (const folder of collection.folders) {
+const editingRequestIndex = ref<number | null>(null)
-          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)
-          }
-        }
 
-        if (filteredRequests.length + filteredFolders.length > 0) {
+const editingProperties = ref<{
-          const filteredCollection = Object.assign({}, collection)
+  collection: HoppCollection | null
-          filteredCollection.requests = filteredRequests
+  isRootCollection: boolean
-          filteredCollection.folders = filteredFolders
+  path: string
-          filteredCollections.push(filteredCollection)
+  inheritedProperties?: HoppInheritedProperty
-        }
+}>({
-      }
+  collection: null,
-
+  isRootCollection: false,
-      return filteredCollections
+  path: "",
-    },
+  inheritedProperties: undefined,
-  },
-  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 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<
+const editingCollection = ref<HoppCollection | TeamCollection | null>(null)
-  HoppCollection<HoppRESTRequest> | TeamCollection | null
->(null)
 const editingCollectionName = ref<string | null>(null)
 const editingCollectionIndex = ref<number | null>(null)
 const editingCollectionID = ref<string | null>(null)
-const editingFolder = ref<
+const editingFolder = ref<HoppCollection | TeamCollection | null>(null)
-  HoppCollection<HoppRESTRequest> | 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 = (
+    editingCollectionName.value = (collection as HoppCollection).name
-      collection as HoppCollection<HoppRESTRequest>
-    ).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) {
+  let possibleTab = null
-    moveRESTRequest(
+
-      folderPath,
+  if (collectionsType.value.type === "my-collections") {
-      pathToLastIndex(requestIndex),
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
-      destinationCollectionIndex
+      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 (
+const exportData = async (collection: HoppCollection | TeamCollection) => {
-  collection: HoppCollection<HoppRESTRequest> | 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()

packages/hoppscotch-common/src/components/cookies/AllModal.vue

@@ -9,6 +9,8 @@
     <template #body>
       <HoppSmartPlaceholder
         v-if="!currentInterceptorSupportsCookies"
+        :src="`/images/states/${colorMode.value}/add_category.svg`"
+        :alt="`${t('cookies.modal.interceptor_no_support')}`"
         :text="t('cookies.modal.interceptor_no_support')"
       >
         <template #body>

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

@@ -105,9 +105,11 @@ const requestCancelFunc: Ref<(() => void) | null> = ref(null)
 
 const loading = ref(false)
 
-const baseURL = import.meta.env.VITE_SHORTCODE_BASE_URL ?? "https://hopp.sh"
+const shortcodeBaseURL =
+  import.meta.env.VITE_SHORTCODE_BASE_URL ?? "https://hopp.sh"
+
 const sharedRequestURL = computed(() => {
-  return `${baseURL}/r/${props.sharedRequestID}`
+  return `${shortcodeBaseURL}/r/${props.sharedRequestID}`
 })
 
 const { subscribeToStream } = useStreamSubscriber()

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

@@ -18,16 +18,22 @@ import { GistSource } from "~/helpers/import-export/import/import-sources/GistSo
 import { hoppEnvImporter } from "~/helpers/import-export/import/hoppEnv"
 
 import * as E from "fp-ts/Either"
-import { appendEnvironments, environments$ } from "~/newstore/environments"
+import {
+  appendEnvironments,
+  addGlobalEnvVariable,
+  environments$,
+} from "~/newstore/environments"
 
 import { createTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
 import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
 import { GQLError } from "~/helpers/backend/GQLClient"
 import { CreateTeamEnvironmentMutation } from "~/helpers/backend/graphql"
 import { postmanEnvImporter } from "~/helpers/import-export/import/postmanEnv"
+import { insomniaEnvImporter } from "~/helpers/import-export/import/insomniaEnv"
 
 import IconFolderPlus from "~icons/lucide/folder-plus"
 import IconPostman from "~icons/hopp/postman"
+import IconInsomnia from "~icons/hopp/insomnia"
 import IconUser from "~icons/lucide/user"
 import { initializeDownloadCollection } from "~/helpers/import-export/export"
 import { computed } from "vue"
@@ -136,6 +142,51 @@ const PostmanEnvironmentsImport: ImporterOrExporter = {
   }),
 }
 
+const insomniaEnvironmentsImport: ImporterOrExporter = {
+  metadata: {
+    id: "import.from_insomnia",
+    name: "import.from_insomnia",
+    icon: IconInsomnia,
+    title: "import.from_json",
+    applicableTo: ["personal-workspace", "team-workspace"],
+    disabled: false,
+  },
+  component: FileSource({
+    acceptedFileTypes: "application/json",
+    caption: "import.insomnia_environment_description",
+    onImportFromFile: async (environments) => {
+      const res = await insomniaEnvImporter(environments)()
+
+      if (E.isLeft(res)) {
+        showImportFailedError()
+        return
+      }
+
+      const globalEnvIndex = res.right.findIndex(
+        (env) => env.name === "Base Environment"
+      )
+
+      const globalEnv =
+        globalEnvIndex !== -1 ? res.right[globalEnvIndex] : undefined
+
+      // remove the global env from the environments array to prevent it from being imported twice
+      if (globalEnvIndex !== -1) {
+        res.right.splice(globalEnvIndex, 1)
+      }
+
+      handleImportToStore(res.right, globalEnv)
+
+      platform.analytics?.logEvent({
+        type: "HOPP_IMPORT_ENVIRONMENT",
+        platform: "rest",
+        workspaceType: isTeamEnvironment.value ? "team" : "personal",
+      })
+
+      emit("hide-modal")
+    },
+  }),
+}
+
 const EnvironmentsImportFromGIST: ImporterOrExporter = {
   metadata: {
     id: "import.environments_from_gist",
@@ -255,6 +306,7 @@ const importerModules = [
   HoppEnvironmentsImport,
   EnvironmentsImportFromGIST,
   PostmanEnvironmentsImport,
+  insomniaEnvironmentsImport,
 ]
 
 const exporterModules = computed(() => {
@@ -271,7 +323,17 @@ const showImportFailedError = () => {
   toast.error(t("import.failed").toString())
 }
 
-const handleImportToStore = async (environments: Environment[]) => {
+const handleImportToStore = async (
+  environments: Environment[],
+  globalEnv?: Environment
+) => {
+  // if there's a global env, add them to the store
+  if (globalEnv) {
+    globalEnv.variables.forEach(({ key, value }) => {
+      addGlobalEnvVariable({ key, value })
+    })
+  }
+
   if (props.environmentType === "MY_ENV") {
     appendEnvironments(environments)
     toast.success(t("state.file_imported"))

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

@@ -37,6 +37,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"
@@ -149,6 +161,17 @@
             />
           </div>
         </div>
+        <div v-if="auth.authType === 'inherit'" class="p-4">
+          <span v-if="inheritedProperties?.auth">
+            Inherited
+            {{ getAuthName(inheritedProperties.auth.inheritedAuth.authType) }}
+            from Parent Collection {{ inheritedProperties?.auth.parentName }}
+          </span>
+          <span v-else>
+            Please save this request in any collection to inherit the
+            authorization
+          </span>
+        </div>
         <div v-if="auth.authType === 'bearer'">
           <div class="flex flex-1 border-b border-dividerLight">
             <SmartEnvInput
@@ -203,6 +226,8 @@ import { pluckRef } from "@composables/ref"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { useVModel } from "@vueuse/core"
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
+import { onMounted } from "vue"
 
 const t = useI18n()
 
@@ -210,12 +235,24 @@ const colorMode = useColorMode()
 
 const props = defineProps<{
   modelValue: HoppGQLAuth
+  isCollectionProperty?: boolean
+  isRootCollection?: boolean
+  inheritedProperties?: HoppInheritedProperty
 }>()
 
 const emit = defineEmits<{
   (e: "update:modelValue", value: HoppGQLAuth): void
 }>()
 
+onMounted(() => {
+  if (props.isRootCollection && auth.value.authType === "inherit") {
+    auth.value = {
+      authType: "none",
+      authActive: true,
+    }
+  }
+})
+
 const auth = useVModel(props, "modelValue", emit)
 
 const AUTH_KEY_NAME = {
@@ -224,12 +261,20 @@ const AUTH_KEY_NAME = {
   "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: HoppGQLAuth["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/graphql/Headers.vue

@@ -77,22 +77,11 @@
               tabindex="-1"
             />
           </span>
-          <HoppSmartAutoComplete
+          <SmartEnvInput
+            v-model="header.key"
             :placeholder="`${t('count.header', { count: index + 1 })}`"
-            :source="commonHeaders"
+            :auto-complete-source="commonHeaders"
-            :spellcheck="false"
+            @change="
-            :value="header.key"
-            autofocus
-            styles="
-                bg-transparent
-                flex
-                flex-1
-                py-1
-                px-4
-                truncate
-              "
-            class="!flex flex-1"
-            @input="
               updateHeader(index, {
                 id: header.id,
                 key: $event,
@@ -101,17 +90,14 @@
               })
             "
           />
-          <input
+          <SmartEnvInput
-            class="flex flex-1 bg-transparent px-4 py-2"
+            v-model="header.value"
             :placeholder="`${t('count.value', { count: index + 1 })}`"
-            :name="`value ${String(index)}`"
-            :value="header.value"
-            autofocus
             @change="
               updateHeader(index, {
                 id: header.id,
                 key: header.key,
-                value: ($event!.target! as HTMLInputElement).value,
+                value: $event,
                 active: header.active,
               })
             "
@@ -156,6 +142,119 @@
         </div>
       </template>
     </draggable>
+
+    <draggable
+      v-model="computedHeaders"
+      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="mask(header)"
+            :placeholder="`${t('count.value', { count: index + 1 })}`"
+            readonly
+          />
+          <span>
+            <HoppButtonSecondary
+              v-if="header.source === 'auth'"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t(masking ? 'state.show' : 'state.hide')"
+              :icon="masking ? IconEye : IconEyeOff"
+              @click="toggleMask()"
+            />
+            <HoppButtonSecondary
+              v-else
+              v-tippy="{ theme: 'tooltip' }"
+              :icon="IconArrowUpRight"
+              :title="t('request.go_to_authorization_tab')"
+              class="cursor-auto text-primary hover:text-primary"
+            />
+          </span>
+          <span>
+            <HoppButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :icon="IconArrowUpRight"
+              :title="t('request.go_to_authorization_tab')"
+            />
+          </span>
+        </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
+          />
+          <HoppButtonSecondary
+            v-if="header.source === 'auth'"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t(masking ? 'state.show' : 'state.hide')"
+            :icon="masking && header.source === 'auth' ? IconEye : IconEyeOff"
+            @click="toggleMask()"
+          />
+          <span v-else class="aspect-square w-[2.05rem]"></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`"
@@ -184,7 +283,12 @@ import IconCheckCircle from "~icons/lucide/check-circle"
 import IconTrash from "~icons/lucide/trash"
 import IconCircle from "~icons/lucide/circle"
 import IconWrapText from "~icons/lucide/wrap-text"
-import { reactive, ref, watch } from "vue"
+import IconArrowUpRight from "~icons/lucide/arrow-up-right"
+import IconLock from "~icons/lucide/lock"
+import IconEye from "~icons/lucide/eye"
+import IconEyeOff from "~icons/lucide/eye-off"
+import IconInfo from "~icons/lucide/info"
+import { computed, reactive, ref, watch } from "vue"
 import * as E from "fp-ts/Either"
 import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
@@ -206,13 +310,20 @@ import { commonHeaders } from "~/helpers/headers"
 import { useCodemirror } from "@composables/codemirror"
 import { objRemoveKey } from "~/helpers/functional/object"
 import { useVModel } from "@vueuse/core"
+import { HoppGQLHeader } from "~/helpers/graphql"
+import { throwError } from "~/helpers/functional/error"
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 
 const colorMode = useColorMode()
 const t = useI18n()
 const toast = useToast()
 
 // v-model integration with props and emit
-const props = defineProps<{ modelValue: HoppGQLRequest }>()
+const props = defineProps<{
+  modelValue: HoppGQLRequest
+  isCollectionProperty?: boolean
+  inheritedProperties?: HoppInheritedProperty
+}>()
 
 const emit = defineEmits<{
   (e: "update:modelValue", value: HoppGQLRequest): void
@@ -413,7 +524,11 @@ const deleteHeader = (index: number) => {
     })
   }
 
-  workingHeaders.value.splice(index, 1)
+  workingHeaders.value = pipe(
+    workingHeaders.value,
+    A.deleteAt(index),
+    O.getOrElseW(() => throwError("Working Headers Deletion Out of Bounds"))
+  )
 }
 
 const clearContent = () => {
@@ -429,4 +544,151 @@ const clearContent = () => {
 
   bulkHeaders.value = ""
 }
+
+const getComputedAuthHeaders = (
+  req?: HoppGQLRequest,
+  auth?: HoppGQLRequest["auth"]
+) => {
+  const request = auth ? { auth: auth ?? { authActive: false } } : req
+  // If Authorization header is also being user-defined, that takes priority
+  if (req && req.headers.find((h) => h.key.toLowerCase() === "authorization"))
+    return []
+
+  if (!request) return []
+
+  if (!request.auth || !request.auth.authActive) return []
+
+  const headers: HoppGQLHeader[] = []
+
+  // TODO: Support a better b64 implementation than btoa ?
+  if (request.auth.authType === "basic") {
+    const username = request.auth.username
+    const password = request.auth.password
+
+    headers.push({
+      active: true,
+      key: "Authorization",
+      value: `Basic ${btoa(`${username}:${password}`)}`,
+    })
+  } else if (
+    request.auth.authType === "bearer" ||
+    request.auth.authType === "oauth-2"
+  ) {
+    headers.push({
+      active: true,
+      key: "Authorization",
+      value: `Bearer ${request.auth.token}`,
+    })
+  } else if (request.auth.authType === "api-key") {
+    const { key, addTo } = request.auth
+
+    if (addTo === "Headers" && key) {
+      headers.push({
+        active: true,
+        key,
+        value: request.auth.value ?? "",
+      })
+    }
+  }
+
+  return headers
+}
+
+const getComputedHeaders = (req: HoppGQLRequest) => {
+  return [
+    ...getComputedAuthHeaders(req).map((header) => ({
+      source: "auth" as const,
+      header,
+    })),
+  ]
+}
+
+const computedHeaders = computed(() =>
+  getComputedHeaders(request.value).map((header, index) => ({
+    id: `header-${index}`,
+    ...header,
+  }))
+)
+
+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.inheritedHeader?.key
+      )
+  )
+
+  const headers = inheritedHeaders
+    .filter(
+      (header) =>
+        header.inheritedHeader !== null &&
+        header.inheritedHeader !== undefined &&
+        header.inheritedHeader.active
+    )
+    .map((header, index) => ({
+      inheritedFrom: props.inheritedProperties?.headers[index].parentName,
+      source: "headers",
+      id: `header-${index}`,
+      header: {
+        key: header.inheritedHeader?.key,
+        value: header.inheritedHeader?.value,
+        active: header.inheritedHeader?.active,
+      },
+    }))
+
+  let auth = [] as {
+    inheritedFrom: string
+    source: "auth"
+    id: string
+    header: {
+      key: string
+      value: string
+      active: boolean
+    }
+  }[]
+
+  const computedAuthHeader = getComputedAuthHeaders(
+    request.value,
+    props.inheritedProperties.auth.inheritedAuth
+  )[0]
+
+  if (
+    computedAuthHeader &&
+    request.value.auth.authType === "inherit" &&
+    request.value.auth.authActive
+  ) {
+    auth = [
+      {
+        inheritedFrom: props.inheritedProperties?.auth.parentName,
+        source: "auth",
+        id: `header-auth`,
+        header: computedAuthHeader,
+      },
+    ]
+  }
+
+  return [...headers, ...auth]
+})
+
+const masking = ref(true)
+
+const toggleMask = () => {
+  masking.value = !masking.value
+}
+
+const mask = (header: any) => {
+  if (header.source === "auth" && masking.value)
+    return header.header.value.replace(/\S/gi, "*")
+  return header.header.value
+}
+
+// const changeTab = (tab: ComputedHeader["source"]) => {
+//   if (tab === "auth") emit("change-tab", "authorization")
+//   else emit("change-tab", "bodyParams")
+// }
 </script>

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

@@ -34,10 +34,16 @@
         :label="`${t('tab.headers')}`"
         :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
       >
-        <GraphqlHeaders v-model="request" />
+        <GraphqlHeaders
+          v-model="request"
+          :inherited-properties="inheritedProperties"
+        />
       </HoppSmartTab>
       <HoppSmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">
-        <GraphqlAuthorization v-model="request.auth" />
+        <GraphqlAuthorization
+          v-model="request.auth"
+          :inherited-properties="inheritedProperties"
+        />
       </HoppSmartTab>
     </HoppSmartTabs>
     <CollectionsSaveRequest
@@ -69,6 +75,7 @@ import { useService } from "dioc/vue"
 import { InterceptorService } from "~/services/interceptor.service"
 import { editGraphqlRequest } from "~/newstore/collections"
 import { GQLTabService } from "~/services/tab/graphql"
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 
 const VALID_GQL_OPERATIONS = [
   "query",
@@ -93,24 +100,22 @@ const props = withDefaults(
     response?: GQLResponseEvent[] | null
     optionTab?: GQLOptionTabs
     tabId: string
+    inheritedProperties?: HoppInheritedProperty
   }>(),
   {
     response: null,
     optionTab: "query",
   }
 )
-const emit = defineEmits(["update:modelValue", "update:response"])
+const emit = defineEmits<{
+  (e: "update:modelValue", value: HoppGQLRequest): void
+  (e: "update:optionTab", value: GQLOptionTabs): void
+  (e: "update:response", value: GQLResponseEvent[]): void
+}>()
+
 const selectedOptionTab = useVModel(props, "optionTab", emit)
 
-const request = ref(props.modelValue)
+const request = useVModel(props, "modelValue", emit)
-
-watch(
-  () => request.value,
-  (newVal) => {
-    emit("update:modelValue", newVal)
-  },
-  { deep: true }
-)
 
 const url = computedWithControl(
   () => tabs.currentActiveTab.value,
@@ -131,10 +136,30 @@ const runQuery = async (
   startPageProgress()
   try {
     const runURL = clone(url.value)
-    const runHeaders = clone(request.value.headers)
     const runQuery = clone(request.value.query)
     const runVariables = clone(request.value.variables)
-    const runAuth = clone(request.value.auth)
+    const runAuth =
+      request.value.auth.authType === "inherit" && request.value.auth.authActive
+        ? clone(tabs.currentActiveTab.value.document.inheritedProperties?.auth)
+        : clone(request.value.auth)
+
+    const inheritedHeaders =
+      tabs.currentActiveTab.value.document.inheritedProperties?.headers.map(
+        (header) => {
+          if (header.inheritedHeader) {
+            return header.inheritedHeader
+          }
+          return []
+        }
+      )
+
+    let runHeaders: HoppGQLRequest["headers"] = []
+
+    if (inheritedHeaders) {
+      runHeaders = [...inheritedHeaders, ...clone(request.value.headers)]
+    } else {
+      runHeaders = clone(request.value.headers)
+    }
 
     await runGQLOperation({
       name: request.value.name,
@@ -142,7 +167,7 @@ const runQuery = async (
       headers: runHeaders,
       query: runQuery,
       variables: runVariables,
-      auth: runAuth,
+      auth: runAuth ?? { authType: "none", authActive: false },
       operationName: definition?.name?.value,
       operationType: definition?.operation ?? "query",
     })

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

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

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

@@ -3,7 +3,7 @@
     <div
       class="sticky top-0 z-10 flex flex-shrink-0 flex-col overflow-x-auto border-b border-dividerLight bg-primary"
     >
-      <WorkspaceCurrent :section="t('tab.history')" />
+      <WorkspaceCurrent :section="t('tab.history')" :is-only-personal="true" />
       <div class="flex">
         <input
           v-model="filterText"

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

@@ -1,7 +1,12 @@
 <template>
   <div class="flex flex-1 flex-col">
     <div
-      class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
+      :class="{
+        'top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold':
+          !isCollectionProperty,
+        'top-propertiesPrimaryStickyFold': isCollectionProperty,
+      }"
     >
       <span class="flex items-center">
         <label class="truncate font-semibold text-secondaryLight">
@@ -37,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"
@@ -135,6 +152,17 @@
         <div v-if="auth.authType === 'basic'">
           <HttpAuthorizationBasic v-model="auth" />
         </div>
+        <div v-if="auth.authType === 'inherit'" class="p-4">
+          <span v-if="inheritedProperties?.auth">
+            Inherited
+            {{ getAuthName(inheritedProperties.auth.inheritedAuth.authType) }}
+            from Parent Collection {{ inheritedProperties?.auth.parentName }}
+          </span>
+          <span v-else>
+            Please save this request in any collection to inherit the
+            authorization
+          </span>
+        </div>
         <div v-if="auth.authType === 'bearer'">
           <div class="flex flex-1 border-b border-dividerLight">
             <SmartEnvInput v-model="auth.token" placeholder="Token" />
@@ -181,6 +209,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()
 
@@ -188,6 +218,9 @@ const colorMode = useColorMode()
 
 const props = defineProps<{
   modelValue: HoppRESTAuth
+  isCollectionProperty?: boolean
+  isRootCollection?: boolean
+  inheritedProperties?: HoppInheritedProperty
 }>()
 
 const emit = defineEmits<{
@@ -196,18 +229,34 @@ const emit = defineEmits<{
 
 const auth = useVModel(props, "modelValue", emit)
 
+onMounted(() => {
+  if (props.isRootCollection && auth.value.authType === "inherit") {
+    auth.value = {
+      authType: "none",
+      authActive: true,
+    }
+  }
+})
+
 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

@@ -1,7 +1,12 @@
 <template>
   <div class="flex flex-1 flex-col">
     <div
-      class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
+      :class="{
+        'top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold':
+          !isCollectionProperty,
+        'top-propertiesPrimaryStickyFold': isCollectionProperty,
+      }"
     >
       <label class="truncate font-semibold text-secondaryLight">
         {{ t("request.header_list") }}
@@ -203,6 +208,61 @@
           </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
+            />
+            <HoppButtonSecondary
+              v-if="header.source === 'auth'"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t(masking ? 'state.show' : 'state.hide')"
+              :icon="masking && header.source === 'auth' ? IconEye : IconEyeOff"
+              @click="toggleMask()"
+            />
+            <span v-else class="aspect-square w-[2.05rem]"></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`"
@@ -236,6 +296,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"
@@ -264,12 +325,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()
@@ -288,7 +351,11 @@ const linewrapEnabled = ref(true)
 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 
 // v-model integration with props and emit
-const props = defineProps<{ modelValue: HoppRESTRequest }>()
+const props = defineProps<{
+  modelValue: HoppRESTRequest
+  isCollectionProperty?: boolean
+  inheritedProperties?: HoppInheritedProperty
+}>()
 
 const emit = defineEmits<{
   (e: "change-tab", value: RESTOptionTabs): void
@@ -494,6 +561,72 @@ 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.inheritedHeader?.key
+      )
+  )
+
+  const headers = inheritedHeaders
+    .filter(
+      (header) =>
+        header.inheritedHeader !== null &&
+        header.inheritedHeader !== undefined &&
+        header.inheritedHeader.active
+    )
+    .map((header, index) => ({
+      inheritedFrom: props.inheritedProperties?.headers[index].parentName,
+      source: "headers",
+      id: `header-${index}`,
+      header: {
+        key: header.inheritedHeader?.key,
+        value: header.inheritedHeader?.value,
+        active: header.inheritedHeader?.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.inheritedAuth
+  )[0]
+
+  if (
+    computedAuthHeader &&
+    request.value.auth.authType === "inherit" &&
+    request.value.auth.authActive
+  ) {
+    auth = [
+      {
+        inheritedFrom: props.inheritedProperties?.auth.parentName,
+        source: "auth",
+        id: `header-auth`,
+        header: computedAuthHeader,
+      },
+    ]
+  }
+
+  return [...headers, ...auth]
+})
+
 const masking = ref(true)
 
 const toggleMask = () => {

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

@@ -180,6 +180,18 @@
                   class="input mb-2 !bg-primaryContrast"
                   @keyup.enter="hide()"
                 />
+                <HoppSmartItem
+                  ref="saveRequestAction"
+                  :label="`${t('request.save_as')}`"
+                  :icon="IconFolderPlus"
+                  @click="
+                    () => {
+                      showSaveRequestModal = true
+                      hide()
+                    }
+                  "
+                />
+                <hr />
                 <HoppSmartItem
                   ref="copyRequestAction"
                   :label="t('request.share_request')"
@@ -192,18 +204,6 @@
                     }
                   "
                 />
-                <hr />
-                <HoppSmartItem
-                  ref="saveRequestAction"
-                  :label="`${t('request.save_as')}`"
-                  :icon="IconFolderPlus"
-                  @click="
-                    () => {
-                      showSaveRequestModal = true
-                      hide()
-                    }
-                  "
-                />
               </div>
             </template>
           </tippy>

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>

packages/hoppscotch-common/src/components/importExport/ImportExportSourcesList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col space-y-2">
     <HoppSmartItem
       v-for="source in sources"
       :key="source.id"

packages/hoppscotch-common/src/components/importExport/ImportExportSteps/MyCollectionImport.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
+import { HoppCollection } from "@hoppscotch/data"
 import { computed, ref } from "vue"
 import { useI18n } from "~/composables/i18n"
 import { useReadonlyStream } from "~/composables/stream"
@@ -48,7 +48,7 @@ const hasSelectedCollectionID = computed(() => {
 const myCollections = useReadonlyStream(restCollections$, [])
 
 const emit = defineEmits<{
-  (e: "importFromMyCollection", content: HoppCollection<HoppRESTRequest>): void
+  (e: "importFromMyCollection", content: HoppCollection): void
 }>()
 
 const fetchCollectionFromMyCollections = async () => {

packages/hoppscotch-common/src/components/share/CustomizeModal.vue

@@ -370,10 +370,11 @@ const linkVariants: LinkVariant[] = [
   },
 ]
 
-const baseURL = import.meta.env.VITE_SHORTCODE_BASE_URL ?? "https://hopp.sh"
+const shortcodeBaseURL =
+  import.meta.env.VITE_SHORTCODE_BASE_URL ?? "https://hopp.sh"
 
 const copyEmbed = () => {
-  return `<iframe src="${baseURL}/e/${props.request?.id}' style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;'></iframe>`
+  return `<iframe src="${shortcodeBaseURL}/e/${props.request?.id}" title="Hoppscotch Embed" style="width: 100%; height: 480px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.1);"></iframe>`
 }
 
 const copyButton = (
@@ -390,18 +391,18 @@ const copyButton = (
   }
 
   if (type === "markdown") {
-    return `[![Run in Hoppscotch](${baseURL}/${badge})](${baseURL}/r/${props.request?.id})`
+    return `[![Run in Hoppscotch](${shortcodeBaseURL}/${badge})](${shortcodeBaseURL}/r/${props.request?.id})`
   }
-  return `<a href="${baseURL}/r/${props.request?.id}"><img src="${baseURL}/${badge}" alt="Run in Hoppscotch" /></a>`
+  return `<a href="${shortcodeBaseURL}/r/${props.request?.id}"><img src="${shortcodeBaseURL}/${badge}" alt="Run in Hoppscotch" /></a>`
 }
 
 const copyLink = (variationID: string) => {
   if (variationID === "link1") {
-    return `${baseURL}/r/${props.request?.id}`
+    return `${shortcodeBaseURL}/r/${props.request?.id}`
   } else if (variationID === "link2") {
-    return `<a href="${baseURL}/r/${props.request?.id}">Run in Hoppscotch</a>`
+    return `<a href="${shortcodeBaseURL}/r/${props.request?.id}">Run in Hoppscotch</a>`
   }
-  return `[Run in Hoppscotch](${baseURL}/r/${props.request?.id})`
+  return `[Run in Hoppscotch](${shortcodeBaseURL}/r/${props.request?.id})`
 }
 
 const copyContent = ({

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

@@ -13,7 +13,7 @@
     >
       <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
-        to="https://docs.hoppscotch.io/documentation/features/shared-request"
+        to="https://docs.hoppscotch.io/documentation/features/share-requests"
         blank
         :title="t('app.wiki')"
         :icon="IconHelpCircle"

packages/hoppscotch-common/src/components/share/templates/Link.vue

@@ -21,7 +21,12 @@ const props = defineProps<{
   label?: string | undefined
 }>()
 
+const shortcodeBaseURL =
+  import.meta.env.VITE_SHORTCODE_BASE_URL ?? "https://hopp.sh"
+
 const text = computed(() => {
-  return props.label ? t(props.label) : `hopp.sh/r/${props.link ?? "xxxx"}`
+  return props.label
+    ? t(props.label)
+    : `${shortcodeBaseURL}/r/${props.link ?? "xxxx"}`
 })
 </script>