fix: stack order

.env.example

@@ -31,7 +31,6 @@ MICROSOFT_CLIENT_ID="************************************************"
 MICROSOFT_CLIENT_SECRET="************************************************"
 MICROSOFT_CALLBACK_URL="http://localhost:3170/v1/auth/microsoft/callback"
 MICROSOFT_SCOPE="user.read"
-MICROSOFT_TENANT="common"
 
 # Mailer config
 MAILER_SMTP_URL="smtps://user@domain.com:pass@smtp.domain.com"

.github/workflows/ui.yml

@@ -1,42 +0,0 @@
-name: Deploy to Netlify (ui)
-
-on:
-  push:
-    branches: [main]
-    # run this workflow only if an update is made to the ui package
-    paths:
-      - "packages/hoppscotch-ui/**"
-  workflow_dispatch:
-
-jobs:
-  deploy:
-    name: Deploy
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup environment
-        run: mv .env.example .env
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
-        with:
-          version: 8
-          run_install: true
-
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node }}
-          cache: pnpm
-
-      - name: Build site
-        run: pnpm run generate-ui
-
-      # Deploy the ui site with netlify-cli
-      - name: Deploy to Netlify (ui)
-        run: npx netlify-cli deploy --dir=packages/hoppscotch-ui/.histoire/dist --prod
-        env:
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_UI_SITE_ID }}
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

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

@@ -1,6 +1,6 @@
 {
   "name": "hoppscotch-backend",
-  "version": "2023.4.7",
+  "version": "2023.4.5",
   "description": "",
   "author": "",
   "private": true,

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

@@ -181,7 +181,7 @@ export class AdminService {
    * @returns an array team invitations
    */
   async pendingInvitationCountInTeam(teamID: string) {
-    const invitations = await this.teamInvitationService.getTeamInvitations(
+    const invitations = await this.teamInvitationService.getAllTeamInvitations(
       teamID,
     );
 
@@ -236,11 +236,11 @@ export class AdminService {
     const user = await this.userService.findUserByEmail(userEmail);
     if (O.isNone(user)) return E.left(USER_NOT_FOUND);
 
-    const teamMember = await this.teamService.getTeamMemberTE(
+    const isUserAlreadyMember = await this.teamService.getTeamMemberTE(
       teamID,
       user.value.uid,
     )();
-    if (E.isLeft(teamMember)) {
+    if (E.left(isUserAlreadyMember)) {
       const addedUser = await this.teamService.addMemberToTeamWithEmail(
         teamID,
         userEmail,
@@ -248,18 +248,6 @@ export class AdminService {
       );
       if (E.isLeft(addedUser)) return E.left(addedUser.left);
 
-      const userInvitation =
-        await this.teamInvitationService.getTeamInviteByEmailAndTeamID(
-          userEmail,
-          teamID,
-        );
-
-      if (E.isRight(userInvitation)) {
-        await this.teamInvitationService.revokeInvitation(
-          userInvitation.right.id,
-        );
-      }
-
       return E.right(addedUser.right);
     }
 

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

@@ -228,7 +228,7 @@ export class AuthService {
         url = process.env.VITE_BASE_URL;
     }
 
-    await this.mailerService.sendEmail(email, {
+    await this.mailerService.sendAuthEmail(email, {
       template: 'code-your-own',
       variables: {
         inviteeEmail: email,

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

@@ -17,7 +17,7 @@ export class MicrosoftStrategy extends PassportStrategy(Strategy) {
       clientSecret: process.env.MICROSOFT_CLIENT_SECRET,
       callbackURL: process.env.MICROSOFT_CALLBACK_URL,
       scope: [process.env.MICROSOFT_SCOPE],
-      tenant: process.env.MICROSOFT_TENANT,
+      passReqToCallback: true,
       store: true,
     });
   }

packages/hoppscotch-backend/src/errors.ts

@@ -23,7 +23,7 @@ export const AUTH_FAIL = 'auth/fail';
 export const JSON_INVALID = 'json_invalid';
 
 /**
- * Tried to delete a user data document from fb firestore but failed.
+ * Tried to delete an user data document from fb firestore but failed.
  * (FirebaseService)
  */
 export const USER_FB_DOCUMENT_DELETION_FAILED =
@@ -231,7 +231,7 @@ export const TEAM_COLL_INVALID_JSON = 'team_coll/invalid_json';
 export const TEAM_NOT_OWNER = 'team_coll/team_not_owner' as const;
 
 /**
- * Tried to perform an action on a request that doesn't accept their member role level
+ * Tried to perform action on a request that doesn't accept their member role level
  * (GqlRequestTeamMemberGuard)
  */
 export const TEAM_REQ_NOT_REQUIRED_ROLE = 'team_req/not_required_role';
@@ -262,7 +262,7 @@ export const TEAM_REQ_REORDERING_FAILED = 'team_req/reordering_failed' as const;
 export const SENDER_EMAIL_INVALID = 'mailer/sender_email_invalid' as const;
 
 /**
- * Tried to perform an action on a request when the user is not even a member of the team
+ * Tried to perform action on a request when the user is not even member of the team
  * (GqlRequestTeamMemberGuard, GqlCollectionTeamMemberGuard)
  */
 export const TEAM_REQ_NOT_MEMBER = 'team_req/not_member';
@@ -307,18 +307,11 @@ export const SHORTCODE_INVALID_JSON = 'shortcode/invalid_json' as const;
 export const SHORTCODE_ALREADY_EXISTS = 'shortcode/already_exists' as const;
 
 /**
- * Invalid or non-existent TEAM ENVIRONMENT ID
+ * Invalid or non-existent TEAM ENVIRONMMENT ID
  * (TeamEnvironmentsService)
  */
 export const TEAM_ENVIRONMENT_NOT_FOUND = 'team_environment/not_found' as const;
 
-/**
- * Invalid TEAM ENVIRONMENT name
- * (TeamEnvironmentsService)
- */
-export const TEAM_ENVIRONMENT_SHORT_NAME =
-  'team_environment/short_name' as const;
-
 /**
  * The user is not a member of the team of the given environment
  * (GqlTeamEnvTeamGuard)
@@ -347,7 +340,7 @@ export const USER_SETTINGS_NULL_SETTINGS =
   'user_settings/null_settings' as const;
 
 /*
- * Global environment doesn't exist for the user
+ * Global environment doesnt exists for the user
  * (UserEnvironmentsService)
  */
 export const USER_ENVIRONMENT_GLOBAL_ENV_DOES_NOT_EXISTS =

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

@@ -5,6 +5,7 @@ import {
   UserMagicLinkMailDescription,
 } from './MailDescriptions';
 import { throwErr } from 'src/utils';
+import * as TE from 'fp-ts/TaskEither';
 import { EMAIL_FAILED } from 'src/errors';
 import { MailerService as NestMailerService } from '@nestjs-modules/mailer';
 
@@ -34,14 +35,33 @@ export class MailerService {
 
   /**
    * Sends an email to the given email address given a mail description
-   * @param to Receiver's email id
+   * @param to The email address to be sent to (NOTE: this is not validated)
    * @param mailDesc Definition of what email to be sent
-   * @returns Response if email was send successfully or not
    */
-  async sendEmail(
+  sendMail(
     to: string,
     mailDesc: MailDescription | UserMagicLinkMailDescription,
   ) {
+    return TE.tryCatch(
+      async () => {
+        await this.nestMailerService.sendMail({
+          to,
+          template: mailDesc.template,
+          subject: this.resolveSubjectForMailDesc(mailDesc),
+          context: mailDesc.variables,
+        });
+      },
+      () => EMAIL_FAILED,
+    );
+  }
+
+  /**
+   *
+   * @param to Receiver's email id
+   * @param mailDesc Details of email to be sent for Magic-Link auth
+   * @returns Response if email was send successfully or not
+   */
+  async sendAuthEmail(to: string, mailDesc: UserMagicLinkMailDescription) {
     try {
       await this.nestMailerService.sendMail({
         to,

packages/hoppscotch-backend/src/team-environments/gql-team-env-team.guard.ts

@@ -1,5 +1,15 @@
 import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
 import { Reflector } from '@nestjs/core';
+import * as TE from 'fp-ts/TaskEither';
+import * as O from 'fp-ts/Option';
+import * as S from 'fp-ts/string';
+import { pipe } from 'fp-ts/function';
+import {
+  getAnnotatedRequiredRoles,
+  getGqlArg,
+  getUserFromGQLContext,
+  throwErr,
+} from 'src/utils';
 import { TeamEnvironmentsService } from './team-environments.service';
 import {
   BUG_AUTH_NO_USER_CTX,
@@ -9,10 +19,6 @@ import {
   TEAM_ENVIRONMENT_NOT_FOUND,
 } from 'src/errors';
 import { TeamService } from 'src/team/team.service';
-import { GqlExecutionContext } from '@nestjs/graphql';
-import * as E from 'fp-ts/Either';
-import { TeamMemberRole } from '@prisma/client';
-import { throwErr } from 'src/utils';
 
 /**
  * A guard which checks whether the caller of a GQL Operation
@@ -27,31 +33,50 @@ export class GqlTeamEnvTeamGuard implements CanActivate {
     private readonly teamService: TeamService,
   ) {}
 
-  async canActivate(context: ExecutionContext): Promise<boolean> {
+  canActivate(context: ExecutionContext): Promise<boolean> {
-    const requireRoles = this.reflector.get<TeamMemberRole[]>(
+    return pipe(
-      'requiresTeamRole',
+      TE.Do,
-      context.getHandler(),
-    );
-    if (!requireRoles) throw new Error(BUG_TEAM_ENV_GUARD_NO_REQUIRE_ROLES);
 
-    const gqlExecCtx = GqlExecutionContext.create(context);
+      TE.bindW('requiredRoles', () =>
+        pipe(
+          getAnnotatedRequiredRoles(this.reflector, context),
+          TE.fromOption(() => BUG_TEAM_ENV_GUARD_NO_REQUIRE_ROLES),
+        ),
+      ),
 
-    const { user } = gqlExecCtx.getContext().req;
+      TE.bindW('user', () =>
-    if (user == undefined) throw new Error(BUG_AUTH_NO_USER_CTX);
+        pipe(
+          getUserFromGQLContext(context),
+          TE.fromOption(() => BUG_AUTH_NO_USER_CTX),
+        ),
+      ),
 
-    const { id } = gqlExecCtx.getArgs<{ id: string }>();
+      TE.bindW('envID', () =>
-    if (!id) throwErr(BUG_TEAM_ENV_GUARD_NO_ENV_ID);
+        pipe(
+          getGqlArg('id', context),
+          O.fromPredicate(S.isString),
+          TE.fromOption(() => BUG_TEAM_ENV_GUARD_NO_ENV_ID),
+        ),
+      ),
 
-    const teamEnvironment =
+      TE.bindW('membership', ({ envID, user }) =>
-      await this.teamEnvironmentService.getTeamEnvironment(id);
+        pipe(
-    if (E.isLeft(teamEnvironment)) throwErr(TEAM_ENVIRONMENT_NOT_FOUND);
+          this.teamEnvironmentService.getTeamEnvironment(envID),
+          TE.fromTaskOption(() => TEAM_ENVIRONMENT_NOT_FOUND),
+          TE.chainW((env) =>
+            pipe(
+              this.teamService.getTeamMemberTE(env.teamID, user.uid),
+              TE.mapLeft(() => TEAM_ENVIRONMENT_NOT_TEAM_MEMBER),
+            ),
+          ),
+        ),
+      ),
 
-    const member = await this.teamService.getTeamMember(
+      TE.map(({ membership, requiredRoles }) =>
-      teamEnvironment.right.teamID,
+        requiredRoles.includes(membership.role),
-      user.uid,
+      ),
-    );
-    if (!member) throwErr(TEAM_ENVIRONMENT_NOT_TEAM_MEMBER);
 
-    return requireRoles.includes(member.role);
+      TE.getOrElse(throwErr),
+    )();
   }
 }

packages/hoppscotch-backend/src/team-environments/input-type.args.ts

@@ -1,41 +0,0 @@
-import { ArgsType, Field, ID } from '@nestjs/graphql';
-
-@ArgsType()
-export class CreateTeamEnvironmentArgs {
-  @Field({
-    name: 'name',
-    description: 'Name of the Team Environment',
-  })
-  name: string;
-
-  @Field(() => ID, {
-    name: 'teamID',
-    description: 'ID of the Team',
-  })
-  teamID: string;
-
-  @Field({
-    name: 'variables',
-    description: 'JSON string of the variables object',
-  })
-  variables: string;
-}
-
-@ArgsType()
-export class UpdateTeamEnvironmentArgs {
-  @Field(() => ID, {
-    name: 'id',
-    description: 'ID of the Team Environment',
-  })
-  id: string;
-  @Field({
-    name: 'name',
-    description: 'Name of the Team Environment',
-  })
-  name: string;
-  @Field({
-    name: 'variables',
-    description: 'JSON string of the variables object',
-  })
-  variables: string;
-}

packages/hoppscotch-backend/src/team-environments/team-environments.resolver.ts

@@ -13,11 +13,6 @@ import { throwErr } from 'src/utils';
 import { GqlTeamEnvTeamGuard } from './gql-team-env-team.guard';
 import { TeamEnvironment } from './team-environments.model';
 import { TeamEnvironmentsService } from './team-environments.service';
-import * as E from 'fp-ts/Either';
-import {
-  CreateTeamEnvironmentArgs,
-  UpdateTeamEnvironmentArgs,
-} from './input-type.args';
 
 @UseGuards(GqlThrottlerGuard)
 @Resolver(() => 'TeamEnvironment')
@@ -34,18 +29,29 @@ export class TeamEnvironmentsResolver {
   })
   @UseGuards(GqlAuthGuard, GqlTeamMemberGuard)
   @RequiresTeamRole(TeamMemberRole.OWNER, TeamMemberRole.EDITOR)
-  async createTeamEnvironment(
+  createTeamEnvironment(
-    @Args() args: CreateTeamEnvironmentArgs,
+    @Args({
+      name: 'name',
+      description: 'Name of the Team Environment',
+    })
+    name: string,
+    @Args({
+      name: 'teamID',
+      description: 'ID of the Team',
+      type: () => ID,
+    })
+    teamID: string,
+    @Args({
+      name: 'variables',
+      description: 'JSON string of the variables object',
+    })
+    variables: string,
   ): Promise<TeamEnvironment> {
-    const teamEnvironment =
+    return this.teamEnvironmentsService.createTeamEnvironment(
-      await this.teamEnvironmentsService.createTeamEnvironment(
+      name,
-        args.name,
+      teamID,
-        args.teamID,
+      variables,
-        args.variables,
+    )();
-      );
-
-    if (E.isLeft(teamEnvironment)) throwErr(teamEnvironment.left);
-    return teamEnvironment.right;
   }
 
   @Mutation(() => Boolean, {
@@ -53,7 +59,7 @@ export class TeamEnvironmentsResolver {
   })
   @UseGuards(GqlAuthGuard, GqlTeamEnvTeamGuard)
   @RequiresTeamRole(TeamMemberRole.OWNER, TeamMemberRole.EDITOR)
-  async deleteTeamEnvironment(
+  deleteTeamEnvironment(
     @Args({
       name: 'id',
       description: 'ID of the Team Environment',
@@ -61,12 +67,10 @@ export class TeamEnvironmentsResolver {
     })
     id: string,
   ): Promise<boolean> {
-    const isDeleted = await this.teamEnvironmentsService.deleteTeamEnvironment(
+    return pipe(
-      id,
+      this.teamEnvironmentsService.deleteTeamEnvironment(id),
-    );
+      TE.getOrElse(throwErr),
-
+    )();
-    if (E.isLeft(isDeleted)) throwErr(isDeleted.left);
-    return isDeleted.right;
   }
 
   @Mutation(() => TeamEnvironment, {
@@ -75,19 +79,28 @@ export class TeamEnvironmentsResolver {
   })
   @UseGuards(GqlAuthGuard, GqlTeamEnvTeamGuard)
   @RequiresTeamRole(TeamMemberRole.OWNER, TeamMemberRole.EDITOR)
-  async updateTeamEnvironment(
+  updateTeamEnvironment(
-    @Args()
+    @Args({
-    args: UpdateTeamEnvironmentArgs,
+      name: 'id',
+      description: 'ID of the Team Environment',
+      type: () => ID,
+    })
+    id: string,
+    @Args({
+      name: 'name',
+      description: 'Name of the Team Environment',
+    })
+    name: string,
+    @Args({
+      name: 'variables',
+      description: 'JSON string of the variables object',
+    })
+    variables: string,
   ): Promise<TeamEnvironment> {
-    const updatedTeamEnvironment =
+    return pipe(
-      await this.teamEnvironmentsService.updateTeamEnvironment(
+      this.teamEnvironmentsService.updateTeamEnvironment(id, name, variables),
-        args.id,
+      TE.getOrElse(throwErr),
-        args.name,
+    )();
-        args.variables,
-      );
-
-    if (E.isLeft(updatedTeamEnvironment)) throwErr(updatedTeamEnvironment.left);
-    return updatedTeamEnvironment.right;
   }
 
   @Mutation(() => TeamEnvironment, {
@@ -95,7 +108,7 @@ export class TeamEnvironmentsResolver {
   })
   @UseGuards(GqlAuthGuard, GqlTeamEnvTeamGuard)
   @RequiresTeamRole(TeamMemberRole.OWNER, TeamMemberRole.EDITOR)
-  async deleteAllVariablesFromTeamEnvironment(
+  deleteAllVariablesFromTeamEnvironment(
     @Args({
       name: 'id',
       description: 'ID of the Team Environment',
@@ -103,13 +116,10 @@ export class TeamEnvironmentsResolver {
     })
     id: string,
   ): Promise<TeamEnvironment> {
-    const teamEnvironment =
+    return pipe(
-      await this.teamEnvironmentsService.deleteAllVariablesFromTeamEnvironment(
+      this.teamEnvironmentsService.deleteAllVariablesFromTeamEnvironment(id),
-        id,
+      TE.getOrElse(throwErr),
-      );
+    )();
-
-    if (E.isLeft(teamEnvironment)) throwErr(teamEnvironment.left);
-    return teamEnvironment.right;
   }
 
   @Mutation(() => TeamEnvironment, {
@@ -117,7 +127,7 @@ export class TeamEnvironmentsResolver {
   })
   @UseGuards(GqlAuthGuard, GqlTeamEnvTeamGuard)
   @RequiresTeamRole(TeamMemberRole.OWNER, TeamMemberRole.EDITOR)
-  async createDuplicateEnvironment(
+  createDuplicateEnvironment(
     @Args({
       name: 'id',
       description: 'ID of the Team Environment',
@@ -125,12 +135,10 @@ export class TeamEnvironmentsResolver {
     })
     id: string,
   ): Promise<TeamEnvironment> {
-    const res = await this.teamEnvironmentsService.createDuplicateEnvironment(
+    return pipe(
-      id,
+      this.teamEnvironmentsService.createDuplicateEnvironment(id),
-    );
+      TE.getOrElse(throwErr),
-
+    )();
-    if (E.isLeft(res)) throwErr(res.left);
-    return res.right;
   }
 
   /* Subscriptions */

packages/hoppscotch-backend/src/team-environments/team-environments.service.spec.ts

@@ -2,11 +2,7 @@ import { mockDeep, mockReset } from 'jest-mock-extended';
 import { PrismaService } from 'src/prisma/prisma.service';
 import { TeamEnvironment } from './team-environments.model';
 import { TeamEnvironmentsService } from './team-environments.service';
-import {
+import { TEAM_ENVIRONMENT_NOT_FOUND } from 'src/errors';
-  JSON_INVALID,
-  TEAM_ENVIRONMENT_NOT_FOUND,
-  TEAM_ENVIRONMENT_SHORT_NAME,
-} from 'src/errors';
 
 const mockPrisma = mockDeep<PrismaService>();
 
@@ -35,81 +31,125 @@ beforeEach(() => {
 
 describe('TeamEnvironmentsService', () => {
   describe('getTeamEnvironment', () => {
-    test('should successfully return a TeamEnvironment with valid ID', async () => {
+    test('queries the db with the id', async () => {
-      mockPrisma.teamEnvironment.findFirstOrThrow.mockResolvedValueOnce(
+      mockPrisma.teamEnvironment.findFirst.mockResolvedValue(teamEnvironment);
-        teamEnvironment,
-      );
 
-      const result = await teamEnvironmentsService.getTeamEnvironment(
+      await teamEnvironmentsService.getTeamEnvironment('123')();
-        teamEnvironment.id,
+
+      expect(mockPrisma.teamEnvironment.findFirst).toHaveBeenCalledWith(
+        expect.objectContaining({
+          where: {
+            id: '123',
+          },
+        }),
       );
-      expect(result).toEqualRight(teamEnvironment);
     });
 
-    test('should throw TEAM_ENVIRONMENT_NOT_FOUND with invalid ID', async () => {
+    test('requests prisma to reject the query promise if not found', async () => {
-      mockPrisma.teamEnvironment.findFirstOrThrow.mockRejectedValueOnce(
+      mockPrisma.teamEnvironment.findFirst.mockResolvedValue(teamEnvironment);
-        'RejectOnNotFound',
-      );
 
-      const result = await teamEnvironmentsService.getTeamEnvironment(
+      await teamEnvironmentsService.getTeamEnvironment('123')();
-        teamEnvironment.id,
+
+      expect(mockPrisma.teamEnvironment.findFirst).toHaveBeenCalledWith(
+        expect.objectContaining({
+          rejectOnNotFound: true,
+        }),
       );
-      expect(result).toEqualLeft(TEAM_ENVIRONMENT_NOT_FOUND);
-    });
     });
 
+    test('should return a Some of the correct environment if exists', async () => {
+      mockPrisma.teamEnvironment.findFirst.mockResolvedValue(teamEnvironment);
+
+      const result = await teamEnvironmentsService.getTeamEnvironment('123')();
+
+      expect(result).toEqualSome(teamEnvironment);
+    });
+
+    test('should return a None if the environment does not exist', async () => {
+      mockPrisma.teamEnvironment.findFirst.mockRejectedValue('NotFoundError');
+
+      const result = await teamEnvironmentsService.getTeamEnvironment('123')();
+
+      expect(result).toBeNone();
+    });
+  });
   describe('createTeamEnvironment', () => {
-    test('should successfully create and return a new team environment given valid inputs', async () => {
+    test('should create and return a new team environment given a valid name,variable and team ID', async () => {
       mockPrisma.teamEnvironment.create.mockResolvedValue(teamEnvironment);
 
       const result = await teamEnvironmentsService.createTeamEnvironment(
         teamEnvironment.name,
         teamEnvironment.teamID,
         JSON.stringify(teamEnvironment.variables),
-      );
+      )();
 
-      expect(result).toEqualRight({
+      expect(result).toEqual(<TeamEnvironment>{
-        ...teamEnvironment,
+        id: teamEnvironment.id,
+        name: teamEnvironment.name,
+        teamID: teamEnvironment.teamID,
         variables: JSON.stringify(teamEnvironment.variables),
       });
     });
 
-    test('should throw TEAM_ENVIRONMENT_SHORT_NAME if input TeamEnvironment name is invalid', async () => {
+    test('should reject if given team ID is invalid', async () => {
-      const result = await teamEnvironmentsService.createTeamEnvironment(
+      mockPrisma.teamEnvironment.create.mockRejectedValue(null as any);
-        '12',
+
+      await expect(
+        teamEnvironmentsService.createTeamEnvironment(
+          teamEnvironment.name,
+          'invalidteamid',
+          JSON.stringify(teamEnvironment.variables),
+        ),
+      ).rejects.toBeDefined();
+    });
+
+    test('should reject if provided team environment name is not a string', async () => {
+      mockPrisma.teamEnvironment.create.mockRejectedValue(null as any);
+
+      await expect(
+        teamEnvironmentsService.createTeamEnvironment(
+          null as any,
           teamEnvironment.teamID,
           JSON.stringify(teamEnvironment.variables),
-      );
+        ),
+      ).rejects.toBeDefined();
+    });
 
-      expect(result).toEqualLeft(TEAM_ENVIRONMENT_SHORT_NAME);
+    test('should reject if provided variable is not a string', async () => {
+      mockPrisma.teamEnvironment.create.mockRejectedValue(null as any);
+
+      await expect(
+        teamEnvironmentsService.createTeamEnvironment(
+          teamEnvironment.name,
+          teamEnvironment.teamID,
+          null as any,
+        ),
+      ).rejects.toBeDefined();
     });
 
     test('should send pubsub message to "team_environment/<teamID>/created" if team environment is created successfully', async () => {
-      mockPrisma.teamEnvironment.create.mockResolvedValue(teamEnvironment);
+      mockPrisma.teamEnvironment.create.mockResolvedValueOnce(teamEnvironment);
 
       const result = await teamEnvironmentsService.createTeamEnvironment(
         teamEnvironment.name,
         teamEnvironment.teamID,
         JSON.stringify(teamEnvironment.variables),
-      );
+      )();
 
       expect(mockPubSub.publish).toHaveBeenCalledWith(
         `team_environment/${teamEnvironment.teamID}/created`,
-        {
+        result,
-          ...teamEnvironment,
-          variables: JSON.stringify(teamEnvironment.variables),
-        },
       );
     });
   });
 
   describe('deleteTeamEnvironment', () => {
-    test('should successfully delete a TeamEnvironment with a valid ID', async () => {
+    test('should resolve to true given a valid team environment ID', async () => {
       mockPrisma.teamEnvironment.delete.mockResolvedValueOnce(teamEnvironment);
 
       const result = await teamEnvironmentsService.deleteTeamEnvironment(
         teamEnvironment.id,
-      );
+      )();
 
       expect(result).toEqualRight(true);
     });
@@ -119,7 +159,7 @@ describe('TeamEnvironmentsService', () => {
 
       const result = await teamEnvironmentsService.deleteTeamEnvironment(
         'invalidid',
-      );
+      )();
 
       expect(result).toEqualLeft(TEAM_ENVIRONMENT_NOT_FOUND);
     });
@@ -129,7 +169,7 @@ describe('TeamEnvironmentsService', () => {
 
       const result = await teamEnvironmentsService.deleteTeamEnvironment(
         teamEnvironment.id,
-      );
+      )();
 
       expect(mockPubSub.publish).toHaveBeenCalledWith(
         `team_environment/${teamEnvironment.teamID}/deleted`,
@@ -142,7 +182,7 @@ describe('TeamEnvironmentsService', () => {
   });
 
   describe('updateVariablesInTeamEnvironment', () => {
-    test('should successfully add new variable to a team environment', async () => {
+    test('should add new variable to a team environment', async () => {
       mockPrisma.teamEnvironment.update.mockResolvedValueOnce({
         ...teamEnvironment,
         variables: [{ key: 'value' }],
@@ -152,7 +192,7 @@ describe('TeamEnvironmentsService', () => {
         teamEnvironment.id,
         teamEnvironment.name,
         JSON.stringify([{ key: 'value' }]),
-      );
+      )();
 
       expect(result).toEqualRight(<TeamEnvironment>{
         ...teamEnvironment,
@@ -160,7 +200,7 @@ describe('TeamEnvironmentsService', () => {
       });
     });
 
-    test('should successfully add new variable to already existing list of variables in a team environment', async () => {
+    test('should add new variable to already existing list of variables in a team environment', async () => {
       mockPrisma.teamEnvironment.update.mockResolvedValueOnce({
         ...teamEnvironment,
         variables: [{ key: 'value' }, { key_2: 'value_2' }],
@@ -170,7 +210,7 @@ describe('TeamEnvironmentsService', () => {
         teamEnvironment.id,
         teamEnvironment.name,
         JSON.stringify([{ key: 'value' }, { key_2: 'value_2' }]),
-      );
+      )();
 
       expect(result).toEqualRight(<TeamEnvironment>{
         ...teamEnvironment,
@@ -178,7 +218,7 @@ describe('TeamEnvironmentsService', () => {
       });
     });
 
-    test('should successfully edit existing variables in a team environment', async () => {
+    test('should edit existing variables in a team environment', async () => {
       mockPrisma.teamEnvironment.update.mockResolvedValueOnce({
         ...teamEnvironment,
         variables: [{ key: '1234' }],
@@ -188,7 +228,7 @@ describe('TeamEnvironmentsService', () => {
         teamEnvironment.id,
         teamEnvironment.name,
         JSON.stringify([{ key: '1234' }]),
-      );
+      )();
 
       expect(result).toEqualRight(<TeamEnvironment>{
         ...teamEnvironment,
@@ -196,7 +236,22 @@ describe('TeamEnvironmentsService', () => {
       });
     });
 
-    test('should successfully edit name of an existing team environment', async () => {
+    test('should delete existing variable in a team environment', async () => {
+      mockPrisma.teamEnvironment.update.mockResolvedValueOnce(teamEnvironment);
+
+      const result = await teamEnvironmentsService.updateTeamEnvironment(
+        teamEnvironment.id,
+        teamEnvironment.name,
+        JSON.stringify([{}]),
+      )();
+
+      expect(result).toEqualRight(<TeamEnvironment>{
+        ...teamEnvironment,
+        variables: JSON.stringify([{}]),
+      });
+    });
+
+    test('should edit name of an existing team environment', async () => {
       mockPrisma.teamEnvironment.update.mockResolvedValueOnce({
         ...teamEnvironment,
         variables: [{ key: '123' }],
@@ -206,7 +261,7 @@ describe('TeamEnvironmentsService', () => {
         teamEnvironment.id,
         teamEnvironment.name,
         JSON.stringify([{ key: '123' }]),
-      );
+      )();
 
       expect(result).toEqualRight(<TeamEnvironment>{
         ...teamEnvironment,
@@ -214,24 +269,14 @@ describe('TeamEnvironmentsService', () => {
       });
     });
 
-    test('should throw TEAM_ENVIRONMENT_SHORT_NAME if input TeamEnvironment name is invalid', async () => {
+    test('should reject to TEAM_ENVIRONMMENT_NOT_FOUND if provided id is invalid', async () => {
-      const result = await teamEnvironmentsService.updateTeamEnvironment(
-        teamEnvironment.id,
-        '12',
-        JSON.stringify([{ key: 'value' }]),
-      );
-
-      expect(result).toEqualLeft(TEAM_ENVIRONMENT_SHORT_NAME);
-    });
-
-    test('should throw TEAM_ENVIRONMMENT_NOT_FOUND if provided id is invalid', async () => {
       mockPrisma.teamEnvironment.update.mockRejectedValue('RecordNotFound');
 
       const result = await teamEnvironmentsService.updateTeamEnvironment(
         'invalidid',
         teamEnvironment.name,
         JSON.stringify(teamEnvironment.variables),
-      );
+      )();
 
       expect(result).toEqualLeft(TEAM_ENVIRONMENT_NOT_FOUND);
     });
@@ -243,7 +288,7 @@ describe('TeamEnvironmentsService', () => {
         teamEnvironment.id,
         teamEnvironment.name,
         JSON.stringify([{ key: 'value' }]),
-      );
+      )();
 
       expect(mockPubSub.publish).toHaveBeenCalledWith(
         `team_environment/${teamEnvironment.teamID}/updated`,
@@ -256,13 +301,13 @@ describe('TeamEnvironmentsService', () => {
   });
 
   describe('deleteAllVariablesFromTeamEnvironment', () => {
-    test('should successfully delete all variables in a team environment', async () => {
+    test('should delete all variables in a team environment', async () => {
       mockPrisma.teamEnvironment.update.mockResolvedValueOnce(teamEnvironment);
 
       const result =
         await teamEnvironmentsService.deleteAllVariablesFromTeamEnvironment(
           teamEnvironment.id,
-        );
+        )();
 
       expect(result).toEqualRight(<TeamEnvironment>{
         ...teamEnvironment,
@@ -270,13 +315,13 @@ describe('TeamEnvironmentsService', () => {
       });
     });
 
-    test('should throw TEAM_ENVIRONMMENT_NOT_FOUND if provided id is invalid', async () => {
+    test('should reject to TEAM_ENVIRONMMENT_NOT_FOUND if provided id is invalid', async () => {
       mockPrisma.teamEnvironment.update.mockRejectedValue('RecordNotFound');
 
       const result =
         await teamEnvironmentsService.deleteAllVariablesFromTeamEnvironment(
           'invalidid',
-        );
+        )();
 
       expect(result).toEqualLeft(TEAM_ENVIRONMENT_NOT_FOUND);
     });
@@ -287,7 +332,7 @@ describe('TeamEnvironmentsService', () => {
       const result =
         await teamEnvironmentsService.deleteAllVariablesFromTeamEnvironment(
           teamEnvironment.id,
-        );
+        )();
 
       expect(mockPubSub.publish).toHaveBeenCalledWith(
         `team_environment/${teamEnvironment.teamID}/updated`,
@@ -300,7 +345,7 @@ describe('TeamEnvironmentsService', () => {
   });
 
   describe('createDuplicateEnvironment', () => {
-    test('should successfully duplicate an existing team environment', async () => {
+    test('should duplicate an existing team environment', async () => {
       mockPrisma.teamEnvironment.findFirst.mockResolvedValueOnce(
         teamEnvironment,
       );
@@ -312,21 +357,21 @@ describe('TeamEnvironmentsService', () => {
 
       const result = await teamEnvironmentsService.createDuplicateEnvironment(
         teamEnvironment.id,
-      );
+      )();
 
       expect(result).toEqualRight(<TeamEnvironment>{
-        id: 'newid',
         ...teamEnvironment,
+        id: 'newid',
         variables: JSON.stringify(teamEnvironment.variables),
       });
     });
 
-    test('should throw TEAM_ENVIRONMMENT_NOT_FOUND if provided id is invalid', async () => {
+    test('should reject to TEAM_ENVIRONMMENT_NOT_FOUND if provided id is invalid', async () => {
       mockPrisma.teamEnvironment.findFirst.mockRejectedValue('NotFoundError');
 
       const result = await teamEnvironmentsService.createDuplicateEnvironment(
         teamEnvironment.id,
-      );
+      )();
 
       expect(result).toEqualLeft(TEAM_ENVIRONMENT_NOT_FOUND);
     });
@@ -343,13 +388,13 @@ describe('TeamEnvironmentsService', () => {
 
       const result = await teamEnvironmentsService.createDuplicateEnvironment(
         teamEnvironment.id,
-      );
+      )();
 
       expect(mockPubSub.publish).toHaveBeenCalledWith(
         `team_environment/${teamEnvironment.teamID}/created`,
         {
-          id: 'newid',
           ...teamEnvironment,
+          id: 'newid',
           variables: JSON.stringify([{}]),
         },
       );

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

@@ -1,14 +1,15 @@
 import { Injectable } from '@nestjs/common';
-import { TeamEnvironment as DBTeamEnvironment, Prisma } from '@prisma/client';
+import { pipe } from 'fp-ts/function';
+import * as T from 'fp-ts/Task';
+import * as TO from 'fp-ts/TaskOption';
+import * as TE from 'fp-ts/TaskEither';
+import * as A from 'fp-ts/Array';
+import { Prisma } from '@prisma/client';
 import { PrismaService } from 'src/prisma/prisma.service';
 import { PubSubService } from 'src/pubsub/pubsub.service';
 import { TeamEnvironment } from './team-environments.model';
-import {
+import { TEAM_ENVIRONMENT_NOT_FOUND } from 'src/errors';
-  TEAM_ENVIRONMENT_NOT_FOUND,
+
-  TEAM_ENVIRONMENT_SHORT_NAME,
-} from 'src/errors';
-import * as E from 'fp-ts/Either';
-import { isValidLength } from 'src/utils';
 @Injectable()
 export class TeamEnvironmentsService {
   constructor(
@@ -16,218 +17,219 @@ export class TeamEnvironmentsService {
     private readonly pubsub: PubSubService,
   ) {}
 
-  TITLE_LENGTH = 3;
+  getTeamEnvironment(id: string) {
-
+    return TO.tryCatch(() =>
-  /**
+      this.prisma.teamEnvironment.findFirst({
-   * TeamEnvironments are saved in the DB in the following way
-   * [{ key: value }, { key: value },....]
-   *
-   */
-
-  /**
-   * Typecast a database TeamEnvironment to a TeamEnvironment model
-   * @param teamEnvironment database TeamEnvironment
-   * @returns TeamEnvironment model
-   */
-  private cast(teamEnvironment: DBTeamEnvironment): TeamEnvironment {
-    return {
-      id: teamEnvironment.id,
-      name: teamEnvironment.name,
-      teamID: teamEnvironment.teamID,
-      variables: JSON.stringify(teamEnvironment.variables),
-    };
-  }
-
-  /**
-   * Get details of a TeamEnvironment.
-   *
-   * @param id TeamEnvironment ID
-   * @returns Either of a TeamEnvironment or error message
-   */
-  async getTeamEnvironment(id: string) {
-    try {
-      const teamEnvironment =
-        await this.prisma.teamEnvironment.findFirstOrThrow({
         where: { id },
-        });
+        rejectOnNotFound: true,
-      return E.right(teamEnvironment);
+      }),
-    } catch (error) {
+    );
-      return E.left(TEAM_ENVIRONMENT_NOT_FOUND);
-    }
   }
 
-  /**
+  createTeamEnvironment(name: string, teamID: string, variables: string) {
-   *  Create a new TeamEnvironment.
+    return pipe(
-   *
+      () =>
-   * @param name name of new TeamEnvironment
+        this.prisma.teamEnvironment.create({
-   * @param teamID teamID of new TeamEnvironment
-   * @param variables JSONified string of contents of new TeamEnvironment
-   * @returns Either of a TeamEnvironment or error message
-   */
-  async createTeamEnvironment(name: string, teamID: string, variables: string) {
-    const isTitleValid = isValidLength(name, this.TITLE_LENGTH);
-    if (!isTitleValid) return E.left(TEAM_ENVIRONMENT_SHORT_NAME);
-
-    const result = await this.prisma.teamEnvironment.create({
           data: {
             name: name,
             teamID: teamID,
             variables: JSON.parse(variables),
           },
-    });
+        }),
-
+      T.chainFirst(
-    const createdTeamEnvironment = this.cast(result);
+        (environment) => () =>
-
           this.pubsub.publish(
-      `team_environment/${createdTeamEnvironment.teamID}/created`,
+            `team_environment/${environment.teamID}/created`,
-      createdTeamEnvironment,
+            <TeamEnvironment>{
+              id: environment.id,
+              name: environment.name,
+              teamID: environment.teamID,
+              variables: JSON.stringify(environment.variables),
+            },
+          ),
+      ),
+      T.map((data) => {
+        return <TeamEnvironment>{
+          id: data.id,
+          name: data.name,
+          teamID: data.teamID,
+          variables: JSON.stringify(data.variables),
+        };
+      }),
     );
-
-    return E.right(createdTeamEnvironment);
   }
 
-  /**
+  deleteTeamEnvironment(id: string) {
-   * Delete a TeamEnvironment.
+    return pipe(
-   *
+      TE.tryCatch(
-   * @param id TeamEnvironment ID
+        () =>
-   * @returns Either of boolean or error message
+          this.prisma.teamEnvironment.delete({
-   */
-  async deleteTeamEnvironment(id: string) {
-    try {
-      const result = await this.prisma.teamEnvironment.delete({
             where: {
               id: id,
             },
-      });
+          }),
-
+        () => TEAM_ENVIRONMENT_NOT_FOUND,
-      const deletedTeamEnvironment = this.cast(result);
+      ),
-
+      TE.chainFirst((environment) =>
+        TE.fromTask(() =>
           this.pubsub.publish(
-        `team_environment/${deletedTeamEnvironment.teamID}/deleted`,
+            `team_environment/${environment.teamID}/deleted`,
-        deletedTeamEnvironment,
+            <TeamEnvironment>{
+              id: environment.id,
+              name: environment.name,
+              teamID: environment.teamID,
+              variables: JSON.stringify(environment.variables),
+            },
+          ),
+        ),
+      ),
+      TE.map((data) => true),
     );
-
-      return E.right(true);
-    } catch (error) {
-      return E.left(TEAM_ENVIRONMENT_NOT_FOUND);
-    }
   }
 
-  /**
+  updateTeamEnvironment(id: string, name: string, variables: string) {
-   * Update a TeamEnvironment.
+    return pipe(
-   *
+      TE.tryCatch(
-   * @param id TeamEnvironment ID
+        () =>
-   * @param name TeamEnvironment name
+          this.prisma.teamEnvironment.update({
-   * @param variables JSONified string of contents of new TeamEnvironment
-   * @returns Either of a TeamEnvironment or error message
-   */
-  async updateTeamEnvironment(id: string, name: string, variables: string) {
-    try {
-      const isTitleValid = isValidLength(name, this.TITLE_LENGTH);
-      if (!isTitleValid) return E.left(TEAM_ENVIRONMENT_SHORT_NAME);
-
-      const result = await this.prisma.teamEnvironment.update({
             where: { id: id },
             data: {
               name,
               variables: JSON.parse(variables),
             },
-      });
+          }),
-
+        () => TEAM_ENVIRONMENT_NOT_FOUND,
-      const updatedTeamEnvironment = this.cast(result);
+      ),
-
+      TE.chainFirst((environment) =>
+        TE.fromTask(() =>
           this.pubsub.publish(
-        `team_environment/${updatedTeamEnvironment.teamID}/updated`,
+            `team_environment/${environment.teamID}/updated`,
-        updatedTeamEnvironment,
+            <TeamEnvironment>{
+              id: environment.id,
+              name: environment.name,
+              teamID: environment.teamID,
+              variables: JSON.stringify(environment.variables),
+            },
+          ),
+        ),
+      ),
+      TE.map(
+        (environment) =>
+          <TeamEnvironment>{
+            id: environment.id,
+            name: environment.name,
+            teamID: environment.teamID,
+            variables: JSON.stringify(environment.variables),
+          },
+      ),
     );
-
-      return E.right(updatedTeamEnvironment);
-    } catch (error) {
-      return E.left(TEAM_ENVIRONMENT_NOT_FOUND);
-    }
   }
 
-  /**
+  deleteAllVariablesFromTeamEnvironment(id: string) {
-   * Clear contents of a TeamEnvironment.
+    return pipe(
-   *
+      TE.tryCatch(
-   * @param id TeamEnvironment ID
+        () =>
-   * @returns Either of a TeamEnvironment or error message
+          this.prisma.teamEnvironment.update({
-   */
-  async deleteAllVariablesFromTeamEnvironment(id: string) {
-    try {
-      const result = await this.prisma.teamEnvironment.update({
             where: { id: id },
             data: {
               variables: [],
             },
-      });
+          }),
-
+        () => TEAM_ENVIRONMENT_NOT_FOUND,
-      const teamEnvironment = this.cast(result);
+      ),
-
+      TE.chainFirst((environment) =>
+        TE.fromTask(() =>
           this.pubsub.publish(
-        `team_environment/${teamEnvironment.teamID}/updated`,
+            `team_environment/${environment.teamID}/updated`,
-        teamEnvironment,
+            <TeamEnvironment>{
+              id: environment.id,
+              name: environment.name,
+              teamID: environment.teamID,
+              variables: JSON.stringify(environment.variables),
+            },
+          ),
+        ),
+      ),
+      TE.map(
+        (environment) =>
+          <TeamEnvironment>{
+            id: environment.id,
+            name: environment.name,
+            teamID: environment.teamID,
+            variables: JSON.stringify(environment.variables),
+          },
+      ),
     );
-
-      return E.right(teamEnvironment);
-    } catch (error) {
-      return E.left(TEAM_ENVIRONMENT_NOT_FOUND);
-    }
   }
 
-  /**
+  createDuplicateEnvironment(id: string) {
-   * Create a duplicate of a existing TeamEnvironment.
+    return pipe(
-   *
+      TE.tryCatch(
-   * @param id TeamEnvironment ID
+        () =>
-   * @returns Either of a TeamEnvironment or error message
+          this.prisma.teamEnvironment.findFirst({
-   */
-  async createDuplicateEnvironment(id: string) {
-    try {
-      const environment = await this.prisma.teamEnvironment.findFirst({
             where: {
               id: id,
             },
             rejectOnNotFound: true,
-      });
+          }),
-
+        () => TEAM_ENVIRONMENT_NOT_FOUND,
-      const result = await this.prisma.teamEnvironment.create({
+      ),
+      TE.chain((environment) =>
+        TE.fromTask(() =>
+          this.prisma.teamEnvironment.create({
             data: {
               name: environment.name,
               teamID: environment.teamID,
               variables: environment.variables as Prisma.JsonArray,
             },
-      });
+          }),
-
+        ),
-      const duplicatedTeamEnvironment = this.cast(result);
+      ),
-
+      TE.chainFirst((environment) =>
+        TE.fromTask(() =>
           this.pubsub.publish(
-        `team_environment/${duplicatedTeamEnvironment.teamID}/created`,
+            `team_environment/${environment.teamID}/created`,
-        duplicatedTeamEnvironment,
+            <TeamEnvironment>{
+              id: environment.id,
+              name: environment.name,
+              teamID: environment.teamID,
+              variables: JSON.stringify(environment.variables),
+            },
+          ),
+        ),
+      ),
+      TE.map(
+        (environment) =>
+          <TeamEnvironment>{
+            id: environment.id,
+            name: environment.name,
+            teamID: environment.teamID,
+            variables: JSON.stringify(environment.variables),
+          },
+      ),
     );
-
-      return E.right(duplicatedTeamEnvironment);
-    } catch (error) {
-      return E.left(TEAM_ENVIRONMENT_NOT_FOUND);
-    }
   }
 
-  /**
+  fetchAllTeamEnvironments(teamID: string) {
-   * Fetch all TeamEnvironments of a team.
+    return pipe(
-   *
+      () =>
-   * @param teamID teamID of new TeamEnvironment
+        this.prisma.teamEnvironment.findMany({
-   * @returns List of TeamEnvironments
-   */
-  async fetchAllTeamEnvironments(teamID: string) {
-    const result = await this.prisma.teamEnvironment.findMany({
           where: {
             teamID: teamID,
           },
-    });
+        }),
-    const teamEnvironments = result.map((item) => {
+      T.map(
-      return this.cast(item);
+        A.map(
-    });
+          (environment) =>
-
+            <TeamEnvironment>{
-    return teamEnvironments;
+              id: environment.id,
+              name: environment.name,
+              teamID: environment.teamID,
+              variables: JSON.stringify(environment.variables),
+            },
+        ),
+      ),
+    );
   }
 
   /**

packages/hoppscotch-backend/src/team-environments/team.resolver.ts

@@ -11,6 +11,6 @@ export class TeamEnvsTeamResolver {
     description: 'Returns all Team Environments for the given Team',
   })
   teamEnvironments(@Parent() team: Team): Promise<TeamEnvironment[]> {
-    return this.teamEnvironmentService.fetchAllTeamEnvironments(team.id);
+    return this.teamEnvironmentService.fetchAllTeamEnvironments(team.id)();
   }
 }

packages/hoppscotch-backend/src/team-invitation/input-type.args.ts

@@ -1,20 +0,0 @@
-import { ArgsType, Field, ID } from '@nestjs/graphql';
-import { TeamMemberRole } from 'src/team/team.model';
-
-@ArgsType()
-export class CreateTeamInvitationArgs {
-  @Field(() => ID, {
-    name: 'teamID',
-    description: 'ID of the Team ID to invite from',
-  })
-  teamID: string;
-
-  @Field({ name: 'inviteeEmail', description: 'Email of the user to invite' })
-  inviteeEmail: string;
-
-  @Field(() => TeamMemberRole, {
-    name: 'inviteeRole',
-    description: 'Role to be given to the user',
-  })
-  inviteeRole: TeamMemberRole;
-}

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

@@ -12,10 +12,15 @@ import { TeamInvitation } from './team-invitation.model';
 import { TeamInvitationService } from './team-invitation.service';
 import { pipe } from 'fp-ts/function';
 import * as TE from 'fp-ts/TaskEither';
-import * as E from 'fp-ts/Either';
 import * as O from 'fp-ts/Option';
 import { Team, TeamMember, TeamMemberRole } from 'src/team/team.model';
-import { TEAM_INVITE_NO_INVITE_FOUND, USER_NOT_FOUND } from 'src/errors';
+import { EmailCodec } from 'src/types/Email';
+import {
+  INVALID_EMAIL,
+  TEAM_INVITE_EMAIL_DO_NOT_MATCH,
+  TEAM_INVITE_NO_INVITE_FOUND,
+  USER_NOT_FOUND,
+} from 'src/errors';
 import { GqlUser } from 'src/decorators/gql-user.decorator';
 import { User } from 'src/user/user.model';
 import { UseGuards } from '@nestjs/common';
@@ -31,8 +36,6 @@ import { UserService } from 'src/user/user.service';
 import { PubSubService } from 'src/pubsub/pubsub.service';
 import { GqlThrottlerGuard } from 'src/guards/gql-throttler.guard';
 import { SkipThrottle } from '@nestjs/throttler';
-import { AuthUser } from 'src/types/AuthUser';
-import { CreateTeamInvitationArgs } from './input-type.args';
 
 @UseGuards(GqlThrottlerGuard)
 @Resolver(() => TeamInvitation)
@@ -76,8 +79,8 @@ export class TeamInvitationResolver {
       'Gets the Team Invitation with the given ID, or null if not exists',
   })
   @UseGuards(GqlAuthGuard, TeamInviteViewerGuard)
-  async teamInvitation(
+  teamInvitation(
-    @GqlUser() user: AuthUser,
+    @GqlUser() user: User,
     @Args({
       name: 'inviteID',
       description: 'ID of the Team Invitation to lookup',
@@ -85,11 +88,17 @@ export class TeamInvitationResolver {
     })
     inviteID: string,
   ): Promise<TeamInvitation> {
-    const teamInvitation = await this.teamInvitationService.getInvitation(
+    return pipe(
-      inviteID,
+      this.teamInvitationService.getInvitation(inviteID),
-    );
+      TE.fromTaskOption(() => TEAM_INVITE_NO_INVITE_FOUND),
-    if (O.isNone(teamInvitation)) throwErr(TEAM_INVITE_NO_INVITE_FOUND);
+      TE.chainW(
-    return teamInvitation.value;
+        TE.fromPredicate(
+          (a) => a.inviteeEmail.toLowerCase() === user.email?.toLowerCase(),
+          () => TEAM_INVITE_EMAIL_DO_NOT_MATCH,
+        ),
+      ),
+      TE.getOrElse(throwErr),
+    )();
   }
 
   @Mutation(() => TeamInvitation, {
@@ -97,19 +106,56 @@ export class TeamInvitationResolver {
   })
   @UseGuards(GqlAuthGuard, GqlTeamMemberGuard)
   @RequiresTeamRole(TeamMemberRole.OWNER)
-  async createTeamInvitation(
+  createTeamInvitation(
-    @GqlUser() user: AuthUser,
+    @GqlUser()
-    @Args() args: CreateTeamInvitationArgs,
+    user: User,
-  ): Promise<TeamInvitation> {
-    const teamInvitation = await this.teamInvitationService.createInvitation(
-      user,
-      args.teamID,
-      args.inviteeEmail,
-      args.inviteeRole,
-    );
 
-    if (E.isLeft(teamInvitation)) throwErr(teamInvitation.left);
+    @Args({
-    return teamInvitation.right;
+      name: 'teamID',
+      description: 'ID of the Team ID to invite from',
+      type: () => ID,
+    })
+    teamID: string,
+    @Args({
+      name: 'inviteeEmail',
+      description: 'Email of the user to invite',
+    })
+    inviteeEmail: string,
+    @Args({
+      name: 'inviteeRole',
+      type: () => TeamMemberRole,
+      description: 'Role to be given to the user',
+    })
+    inviteeRole: TeamMemberRole,
+  ): Promise<TeamInvitation> {
+    return pipe(
+      TE.Do,
+
+      // Validate email
+      TE.bindW('email', () =>
+        pipe(
+          EmailCodec.decode(inviteeEmail),
+          TE.fromEither,
+          TE.mapLeft(() => INVALID_EMAIL),
+        ),
+      ),
+
+      // Validate and get Team
+      TE.bindW('team', () => this.teamService.getTeamWithIDTE(teamID)),
+
+      // Create team
+      TE.chainW(({ email, team }) =>
+        this.teamInvitationService.createInvitation(
+          user,
+          team,
+          email,
+          inviteeRole,
+        ),
+      ),
+
+      // If failed, throw err (so the message is passed) else return value
+      TE.getOrElse(throwErr),
+    )();
   }
 
   @Mutation(() => Boolean, {
@@ -117,7 +163,7 @@ export class TeamInvitationResolver {
   })
   @UseGuards(GqlAuthGuard, TeamInviteTeamOwnerGuard)
   @RequiresTeamRole(TeamMemberRole.OWNER)
-  async revokeTeamInvitation(
+  revokeTeamInvitation(
     @Args({
       name: 'inviteID',
       type: () => ID,
@@ -125,19 +171,19 @@ export class TeamInvitationResolver {
     })
     inviteID: string,
   ): Promise<true> {
-    const isRevoked = await this.teamInvitationService.revokeInvitation(
+    return pipe(
-      inviteID,
+      this.teamInvitationService.revokeInvitation(inviteID),
-    );
+      TE.map(() => true as const),
-    if (E.isLeft(isRevoked)) throwErr(isRevoked.left);
+      TE.getOrElse(throwErr),
-    return true;
+    )();
   }
 
   @Mutation(() => TeamMember, {
     description: 'Accept an Invitation',
   })
   @UseGuards(GqlAuthGuard, TeamInviteeGuard)
-  async acceptTeamInvitation(
+  acceptTeamInvitation(
-    @GqlUser() user: AuthUser,
+    @GqlUser() user: User,
     @Args({
       name: 'inviteID',
       type: () => ID,
@@ -145,12 +191,10 @@ export class TeamInvitationResolver {
     })
     inviteID: string,
   ): Promise<TeamMember> {
-    const teamMember = await this.teamInvitationService.acceptInvitation(
+    return pipe(
-      inviteID,
+      this.teamInvitationService.acceptInvitation(inviteID, user),
-      user,
+      TE.getOrElse(throwErr),
-    );
+    )();
-    if (E.isLeft(teamMember)) throwErr(teamMember.left);
-    return teamMember.right;
   }
 
   // Subscriptions

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

@@ -1,25 +1,24 @@
 import { Injectable } from '@nestjs/common';
+import * as T from 'fp-ts/Task';
 import * as O from 'fp-ts/Option';
-import * as E from 'fp-ts/Either';
+import * as TO from 'fp-ts/TaskOption';
+import * as TE from 'fp-ts/TaskEither';
+import { pipe, flow, constVoid } from 'fp-ts/function';
 import { PrismaService } from 'src/prisma/prisma.service';
-import { TeamInvitation as DBTeamInvitation } from '@prisma/client';
+import { Team, TeamMemberRole } from 'src/team/team.model';
-import { TeamMember, TeamMemberRole } from 'src/team/team.model';
+import { Email } from 'src/types/Email';
+import { User } from 'src/user/user.model';
 import { TeamService } from 'src/team/team.service';
 import {
-  INVALID_EMAIL,
-  TEAM_INVALID_ID,
   TEAM_INVITE_ALREADY_MEMBER,
   TEAM_INVITE_EMAIL_DO_NOT_MATCH,
   TEAM_INVITE_MEMBER_HAS_INVITE,
   TEAM_INVITE_NO_INVITE_FOUND,
-  TEAM_MEMBER_NOT_FOUND,
 } from 'src/errors';
 import { TeamInvitation } from './team-invitation.model';
 import { MailerService } from 'src/mailer/mailer.service';
 import { UserService } from 'src/user/user.service';
 import { PubSubService } from 'src/pubsub/pubsub.service';
-import { validateEmail } from '../utils';
-import { AuthUser } from 'src/types/AuthUser';
 
 @Injectable()
 export class TeamInvitationService {
@@ -30,221 +29,245 @@ export class TeamInvitationService {
     private readonly mailerService: MailerService,
 
     private readonly pubsub: PubSubService,
-  ) {}
+  ) {
-
+    this.getInvitation = this.getInvitation.bind(this);
-  /**
-   * Cast a DBTeamInvitation to a TeamInvitation
-   * @param dbTeamInvitation database TeamInvitation
-   * @returns TeamInvitation model
-   */
-  cast(dbTeamInvitation: DBTeamInvitation): TeamInvitation {
-    return {
-      ...dbTeamInvitation,
-      inviteeRole: TeamMemberRole[dbTeamInvitation.inviteeRole],
-    };
   }
 
-  /**
+  getInvitation(inviteID: string): TO.TaskOption<TeamInvitation> {
-   * Get the team invite
+    return pipe(
-   * @param inviteID invite id
+      () =>
-   * @returns an Option of team invitation or none
+        this.prisma.teamInvitation.findUnique({
-   */
-  async getInvitation(inviteID: string) {
-    try {
-      const dbInvitation = await this.prisma.teamInvitation.findUniqueOrThrow({
           where: {
             id: inviteID,
           },
-      });
+        }),
-
+      TO.fromTask,
-      return O.some(this.cast(dbInvitation));
+      TO.chain(flow(O.fromNullable, TO.fromOption)),
-    } catch (e) {
+      TO.map((x) => x as TeamInvitation),
-      return O.none;
+    );
-    }
   }
 
-  /**
+  getInvitationWithEmail(email: Email, team: Team) {
-   * Get the team invite for an invitee with email and teamID.
+    return pipe(
-   * @param inviteeEmail invitee email
+      () =>
-   * @param teamID team id
+        this.prisma.teamInvitation.findUnique({
-   * @returns an Either of team invitation for the invitee or error
-   */
-  async getTeamInviteByEmailAndTeamID(inviteeEmail: string, teamID: string) {
-    const isEmailValid = validateEmail(inviteeEmail);
-    if (!isEmailValid) return E.left(INVALID_EMAIL);
-
-    try {
-      const teamInvite = await this.prisma.teamInvitation.findUniqueOrThrow({
           where: {
             teamID_inviteeEmail: {
-            inviteeEmail: inviteeEmail,
+              inviteeEmail: email,
-            teamID: teamID,
+              teamID: team.id,
             },
           },
-      });
+        }),
-
+      TO.fromTask,
-      return E.right(teamInvite);
+      TO.chain(flow(O.fromNullable, TO.fromOption)),
-    } catch (e) {
+    );
-      return E.left(TEAM_INVITE_NO_INVITE_FOUND);
-    }
   }
 
-  /**
+  createInvitation(
-   * Create a team invitation
+    creator: User,
-   * @param creator creator of the invitation
+    team: Team,
-   * @param teamID team id
+    inviteeEmail: Email,
-   * @param inviteeEmail invitee email
-   * @param inviteeRole invitee role
-   * @returns an Either of team invitation or error message
-   */
-  async createInvitation(
-    creator: AuthUser,
-    teamID: string,
-    inviteeEmail: string,
     inviteeRole: TeamMemberRole,
   ) {
-    // validate email
+    return pipe(
-    const isEmailValid = validateEmail(inviteeEmail);
+      // Perform all validation checks
-    if (!isEmailValid) return E.left(INVALID_EMAIL);
+      TE.sequenceArray([
+        // creator should be a TeamMember
+        pipe(
+          this.teamService.getTeamMemberTE(team.id, creator.uid),
+          TE.map(constVoid),
+        ),
 
-    // team ID should valid
+        // Invitee should not be a team member
-    const team = await this.teamService.getTeamWithID(teamID);
+        pipe(
-    if (!team) return E.left(TEAM_INVALID_ID);
+          async () => await this.userService.findUserByEmail(inviteeEmail),
+          TO.foldW(
+            () => TE.right(undefined), // If no user, short circuit to completion
+            (user) =>
+              pipe(
+                // If user is found, check if team member
+                this.teamService.getTeamMemberTE(team.id, user.uid),
+                TE.foldW(
+                  () => TE.right(undefined), // Not team-member, this is good
+                  () => TE.left(TEAM_INVITE_ALREADY_MEMBER), // Is team member, not good
+                ),
+              ),
+          ),
+          TE.map(constVoid),
+        ),
 
-    // invitation creator should be a TeamMember
+        // Should not have an existing invite
-    const isTeamMember = await this.teamService.getTeamMember(
+        pipe(
-      team.id,
+          this.getInvitationWithEmail(inviteeEmail, team),
-      creator.uid,
+          TE.fromTaskOption(() => null),
-    );
+          TE.swap,
-    if (!isTeamMember) return E.left(TEAM_MEMBER_NOT_FOUND);
+          TE.map(constVoid),
+          TE.mapLeft(() => TEAM_INVITE_MEMBER_HAS_INVITE),
+        ),
+      ]),
 
-    // Checking to see if the invitee is already part of the team or not
+      // Create the invitation
-    const inviteeUser = await this.userService.findUserByEmail(inviteeEmail);
+      TE.chainTaskK(
-    if (O.isSome(inviteeUser)) {
+        () => () =>
-      // invitee should not already a member
+          this.prisma.teamInvitation.create({
-      const isTeamMember = await this.teamService.getTeamMember(
-        team.id,
-        inviteeUser.value.uid,
-      );
-      if (isTeamMember) return E.left(TEAM_INVITE_ALREADY_MEMBER);
-    }
-
-    // check invitee already invited earlier or not
-    const teamInvitation = await this.getTeamInviteByEmailAndTeamID(
-      inviteeEmail,
-      team.id,
-    );
-    if (E.isRight(teamInvitation)) return E.left(TEAM_INVITE_MEMBER_HAS_INVITE);
-
-    // create the invitation
-    const dbInvitation = await this.prisma.teamInvitation.create({
             data: {
               teamID: team.id,
               inviteeEmail,
               inviteeRole,
               creatorUid: creator.uid,
             },
-    });
+          }),
+      ),
 
-    await this.mailerService.sendEmail(inviteeEmail, {
+      // Send email, this is a side effect
+      TE.chainFirstTaskK((invitation) =>
+        pipe(
+          this.mailerService.sendMail(inviteeEmail, {
             template: 'team-invitation',
             variables: {
               invitee: creator.displayName ?? 'A Hoppscotch User',
-        action_url: `${process.env.VITE_BASE_URL}/join-team?id=${dbInvitation.id}`,
+              action_url: `${process.env.VITE_BASE_URL}/join-team?id=${invitation.id}`,
               invite_team_name: team.name,
             },
-    });
+          }),
 
-    const invitation = this.cast(dbInvitation);
+          TE.getOrElseW(() => T.of(undefined)), // This value doesn't matter as we don't mind the return value (chainFirst) as long as the task completes
-    this.pubsub.publish(`team/${invitation.teamID}/invite_added`, invitation);
+        ),
+      ),
 
-    return E.right(invitation);
+      // Send PubSub topic
+      TE.chainFirstTaskK((invitation) =>
+        TE.fromTask(async () => {
+          const inv: TeamInvitation = {
+            id: invitation.id,
+            teamID: invitation.teamID,
+            creatorUid: invitation.creatorUid,
+            inviteeEmail: invitation.inviteeEmail,
+            inviteeRole: TeamMemberRole[invitation.inviteeRole],
+          };
+
+          this.pubsub.publish(`team/${inv.teamID}/invite_added`, inv);
+        }),
+      ),
+
+      // Map to model type
+      TE.map((x) => x as TeamInvitation),
+    );
   }
 
-  /**
+  revokeInvitation(inviteID: string) {
-   * Revoke a team invitation
+    return pipe(
-   * @param inviteID invite id
+      // Make sure invite exists
-   * @returns an Either of true or error message
+      this.getInvitation(inviteID),
-   */
+      TE.fromTaskOption(() => TEAM_INVITE_NO_INVITE_FOUND),
-  async revokeInvitation(inviteID: string) {
-    // check if the invite exists
-    const invitation = await this.getInvitation(inviteID);
-    if (O.isNone(invitation)) return E.left(TEAM_INVITE_NO_INVITE_FOUND);
 
-    // delete the invite
+      // Delete team invitation
-    await this.prisma.teamInvitation.delete({
+      TE.chainTaskK(
+        () => () =>
+          this.prisma.teamInvitation.delete({
             where: {
               id: inviteID,
             },
-    });
+          }),
+      ),
 
+      // Emit Pubsub Event
+      TE.chainFirst((invitation) =>
+        TE.fromTask(() =>
           this.pubsub.publish(
-      `team/${invitation.value.teamID}/invite_removed`,
+            `team/${invitation.teamID}/invite_removed`,
-      invitation.value.id,
+            invitation.id,
-    );
+          ),
+        ),
+      ),
 
-    return E.right(true);
+      // We are not returning anything
+      TE.map(constVoid),
+    );
+  }
+
+  getAllInvitationsInTeam(team: Team) {
+    return pipe(
+      () =>
+        this.prisma.teamInvitation.findMany({
+          where: {
+            teamID: team.id,
+          },
+        }),
+      T.map((x) => x as TeamInvitation[]),
+    );
+  }
+
+  acceptInvitation(inviteID: string, acceptedBy: User) {
+    return pipe(
+      TE.Do,
+
+      // First get the invitation
+      TE.bindW('invitation', () =>
+        pipe(
+          this.getInvitation(inviteID),
+          TE.fromTaskOption(() => TEAM_INVITE_NO_INVITE_FOUND),
+        ),
+      ),
+
+      // Validation checks
+      TE.chainFirstW(({ invitation }) =>
+        TE.sequenceArray([
+          // Make sure the invited user is not part of the team
+          pipe(
+            this.teamService.getTeamMemberTE(invitation.teamID, acceptedBy.uid),
+            TE.swap,
+            TE.bimap(
+              () => TEAM_INVITE_ALREADY_MEMBER,
+              constVoid, // The return type is ignored
+            ),
+          ),
+
+          // Make sure the invited user and accepting user has the same email
+          pipe(
+            undefined,
+            TE.fromPredicate(
+              (a) => acceptedBy.email === invitation.inviteeEmail,
+              () => TEAM_INVITE_EMAIL_DO_NOT_MATCH,
+            ),
+          ),
+        ]),
+      ),
+
+      // Add the team member
+      // TODO: Somehow bring subscriptions to this ?
+      TE.bindW('teamMember', ({ invitation }) =>
+        pipe(
+          TE.tryCatch(
+            () =>
+              this.teamService.addMemberToTeam(
+                invitation.teamID,
+                acceptedBy.uid,
+                invitation.inviteeRole,
+              ),
+            () => TEAM_INVITE_ALREADY_MEMBER, // Can only fail if Team Member already exists, which we checked, but due to async lets assert that here too
+          ),
+        ),
+      ),
+
+      TE.chainFirstW(({ invitation }) => this.revokeInvitation(invitation.id)),
+
+      TE.map(({ teamMember }) => teamMember),
+    );
   }
 
   /**
-   * Accept a team invitation
+   * Fetch the count invitations for a given team.
-   * @param inviteID invite id
-   * @param acceptedBy user who accepted the invitation
-   * @returns an Either of team member or error message
-   */
-  async acceptInvitation(inviteID: string, acceptedBy: AuthUser) {
-    // check if the invite exists
-    const invitation = await this.getInvitation(inviteID);
-    if (O.isNone(invitation)) return E.left(TEAM_INVITE_NO_INVITE_FOUND);
-
-    // make sure the user is not already a member of the team
-    const teamMemberInvitee = await this.teamService.getTeamMember(
-      invitation.value.teamID,
-      acceptedBy.uid,
-    );
-    if (teamMemberInvitee) return E.left(TEAM_INVITE_ALREADY_MEMBER);
-
-    // make sure the user is the same as the invitee
-    if (
-      acceptedBy.email.toLowerCase() !==
-      invitation.value.inviteeEmail.toLowerCase()
-    )
-      return E.left(TEAM_INVITE_EMAIL_DO_NOT_MATCH);
-
-    // add the user to the team
-    let teamMember: TeamMember;
-    try {
-      teamMember = await this.teamService.addMemberToTeam(
-        invitation.value.teamID,
-        acceptedBy.uid,
-        invitation.value.inviteeRole,
-      );
-    } catch (e) {
-      return E.left(TEAM_INVITE_ALREADY_MEMBER);
-    }
-
-    // delete the invite
-    await this.revokeInvitation(inviteID);
-
-    return E.right(teamMember);
-  }
-
-  /**
-   * Fetch all team invitations for a given team.
    * @param teamID team id
-   * @returns array of team invitations for a team
+   * @returns a count team invitations for a team
    */
-  async getTeamInvitations(teamID: string) {
+  async getAllTeamInvitations(teamID: string) {
-    const dbInvitations = await this.prisma.teamInvitation.findMany({
+    const invitations = await this.prisma.teamInvitation.findMany({
       where: {
         teamID: teamID,
       },
     });
 
-    const invitations: TeamInvitation[] = dbInvitations.map((dbInvitation) =>
-      this.cast(dbInvitation),
-    );
-
     return invitations;
   }
 }

packages/hoppscotch-backend/src/team-invitation/team-invite-team-owner.guard.ts

@@ -1,21 +1,21 @@
 import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
+import { pipe } from 'fp-ts/function';
 import { TeamService } from 'src/team/team.service';
 import { TeamInvitationService } from './team-invitation.service';
 import * as O from 'fp-ts/Option';
+import * as T from 'fp-ts/Task';
+import * as TE from 'fp-ts/TaskEither';
 import { GqlExecutionContext } from '@nestjs/graphql';
 import {
   BUG_AUTH_NO_USER_CTX,
   BUG_TEAM_INVITE_NO_INVITE_ID,
   TEAM_INVITE_NO_INVITE_FOUND,
-  TEAM_MEMBER_NOT_FOUND,
   TEAM_NOT_REQUIRED_ROLE,
 } from 'src/errors';
+import { User } from 'src/user/user.model';
 import { throwErr } from 'src/utils';
 import { TeamMemberRole } from 'src/team/team.model';
 
-/**
- * This guard only allows team owner to execute the resolver
- */
 @Injectable()
 export class TeamInviteTeamOwnerGuard implements CanActivate {
   constructor(
@@ -24,30 +24,48 @@ export class TeamInviteTeamOwnerGuard implements CanActivate {
   ) {}
 
   async canActivate(context: ExecutionContext): Promise<boolean> {
-    // Get GQL context
+    return pipe(
-    const gqlExecCtx = GqlExecutionContext.create(context);
+      TE.Do,
 
-    // Get user
+      TE.bindW('gqlCtx', () => TE.of(GqlExecutionContext.create(context))),
-    const { user } = gqlExecCtx.getContext().req;
-    if (!user) throwErr(BUG_AUTH_NO_USER_CTX);
 
       // Get the invite
-    const { inviteID } = gqlExecCtx.getArgs<{ inviteID: string }>();
+      TE.bindW('invite', ({ gqlCtx }) =>
-    if (!inviteID) throwErr(BUG_TEAM_INVITE_NO_INVITE_ID);
+        pipe(
+          O.fromNullable(gqlCtx.getArgs<{ inviteID?: string }>().inviteID),
+          TE.fromOption(() => BUG_TEAM_INVITE_NO_INVITE_ID),
+          TE.chainW((inviteID) =>
+            pipe(
+              this.teamInviteService.getInvitation(inviteID),
+              TE.fromTaskOption(() => TEAM_INVITE_NO_INVITE_FOUND),
+            ),
+          ),
+        ),
+      ),
 
-    const invitation = await this.teamInviteService.getInvitation(inviteID);
+      TE.bindW('user', ({ gqlCtx }) =>
-    if (O.isNone(invitation)) throwErr(TEAM_INVITE_NO_INVITE_FOUND);
+        pipe(
+          gqlCtx.getContext().req.user,
+          O.fromNullable,
+          TE.fromOption(() => BUG_AUTH_NO_USER_CTX),
+        ),
+      ),
 
-    // Fetch team member details of this user
+      TE.bindW('userMember', ({ invite, user }) =>
-    const teamMember = await this.teamService.getTeamMember(
+        this.teamService.getTeamMemberTE(invite.teamID, user.uid),
-      invitation.value.teamID,
+      ),
-      user.uid,
-    );
 
-    if (!teamMember) throwErr(TEAM_MEMBER_NOT_FOUND);
+      TE.chainW(
-    if (teamMember.role !== TeamMemberRole.OWNER)
+        TE.fromPredicate(
-      throwErr(TEAM_NOT_REQUIRED_ROLE);
+          ({ userMember }) => userMember.role === TeamMemberRole.OWNER,
+          () => TEAM_NOT_REQUIRED_ROLE,
+        ),
+      ),
 
-    return true;
+      TE.fold(
+        (err) => throwErr(err),
+        () => T.of(true),
+      ),
+    )();
   }
 }

packages/hoppscotch-backend/src/team-invitation/team-invite-viewer.guard.ts

@@ -1,23 +1,20 @@
 import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
 import { TeamInvitationService } from './team-invitation.service';
+import { pipe, flow } from 'fp-ts/function';
+import * as TE from 'fp-ts/TaskEither';
+import * as T from 'fp-ts/Task';
 import * as O from 'fp-ts/Option';
 import { GqlExecutionContext } from '@nestjs/graphql';
 import {
   BUG_AUTH_NO_USER_CTX,
   BUG_TEAM_INVITE_NO_INVITE_ID,
+  TEAM_INVITE_NOT_VALID_VIEWER,
   TEAM_INVITE_NO_INVITE_FOUND,
-  TEAM_MEMBER_NOT_FOUND,
 } from 'src/errors';
+import { User } from 'src/user/user.model';
 import { throwErr } from 'src/utils';
 import { TeamService } from 'src/team/team.service';
 
-/**
- * This guard only allows user to execute the resolver
- * 1. If user is invitee, allow
- * 2. Or else, if user is team member, allow
- *
- * TLDR: Allow if user is invitee or team member
- */
 @Injectable()
 export class TeamInviteViewerGuard implements CanActivate {
   constructor(
@@ -26,32 +23,50 @@ export class TeamInviteViewerGuard implements CanActivate {
   ) {}
 
   async canActivate(context: ExecutionContext): Promise<boolean> {
-    // Get GQL context
+    return pipe(
-    const gqlExecCtx = GqlExecutionContext.create(context);
+      TE.Do,
+
+      // Get GQL Context
+      TE.bindW('gqlCtx', () => TE.of(GqlExecutionContext.create(context))),
 
       // Get user
-    const { user } = gqlExecCtx.getContext().req;
+      TE.bindW('user', ({ gqlCtx }) =>
-    if (!user) throwErr(BUG_AUTH_NO_USER_CTX);
+        pipe(
+          O.fromNullable(gqlCtx.getContext<{ user?: User }>().user),
+          TE.fromOption(() => BUG_AUTH_NO_USER_CTX),
+        ),
+      ),
 
       // Get the invite
-    const { inviteID } = gqlExecCtx.getArgs<{ inviteID: string }>();
+      TE.bindW('invite', ({ gqlCtx }) =>
-    if (!inviteID) throwErr(BUG_TEAM_INVITE_NO_INVITE_ID);
+        pipe(
+          O.fromNullable(gqlCtx.getArgs<{ inviteID?: string }>().inviteID),
+          TE.fromOption(() => BUG_TEAM_INVITE_NO_INVITE_ID),
+          TE.chainW(
+            flow(
+              this.teamInviteService.getInvitation,
+              TE.fromTaskOption(() => TEAM_INVITE_NO_INVITE_FOUND),
+            ),
+          ),
+        ),
+      ),
 
-    const invitation = await this.teamInviteService.getInvitation(inviteID);
+      // Check if the user and the invite email match, else if we can resolver the user as a team member
-    if (O.isNone(invitation)) throwErr(TEAM_INVITE_NO_INVITE_FOUND);
+      // any better solution ?
+      TE.chainW(({ user, invite }) =>
+        user.email?.toLowerCase() === invite.inviteeEmail.toLowerCase()
+          ? TE.of(true)
+          : pipe(
+              this.teamService.getTeamMemberTE(invite.teamID, user.uid),
+              TE.map(() => true),
+            ),
+      ),
 
-    // Check if the user and the invite email match, else if user is a team member
+      TE.mapLeft((e) =>
-    if (
+        e === 'team/member_not_found' ? TEAM_INVITE_NOT_VALID_VIEWER : e,
-      user.email?.toLowerCase() !== invitation.value.inviteeEmail.toLowerCase()
+      ),
-    ) {
-      const teamMember = await this.teamService.getTeamMember(
-        invitation.value.teamID,
-        user.uid,
-      );
 
-      if (!teamMember) throwErr(TEAM_MEMBER_NOT_FOUND);
+      TE.fold(throwErr, () => T.of(true)),
-    }
+    )();
-
-    return true;
   }
 }

packages/hoppscotch-backend/src/team-invitation/team-invitee.guard.ts

@@ -1,7 +1,11 @@
 import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
 import { TeamInvitationService } from './team-invitation.service';
+import { pipe, flow } from 'fp-ts/function';
 import * as O from 'fp-ts/Option';
+import * as T from 'fp-ts/Task';
+import * as TE from 'fp-ts/TaskEither';
 import { GqlExecutionContext } from '@nestjs/graphql';
+import { User } from 'src/user/user.model';
 import {
   BUG_AUTH_NO_USER_CTX,
   BUG_TEAM_INVITE_NO_INVITE_ID,
@@ -20,26 +24,44 @@ export class TeamInviteeGuard implements CanActivate {
   constructor(private readonly teamInviteService: TeamInvitationService) {}
 
   async canActivate(context: ExecutionContext): Promise<boolean> {
-    // Get GQL Context
+    return pipe(
-    const gqlExecCtx = GqlExecutionContext.create(context);
+      TE.Do,
+
+      // Get execution context
+      TE.bindW('gqlCtx', () => TE.of(GqlExecutionContext.create(context))),
 
       // Get user
-    const { user } = gqlExecCtx.getContext().req;
+      TE.bindW('user', ({ gqlCtx }) =>
-    if (!user) throwErr(BUG_AUTH_NO_USER_CTX);
+        pipe(
+          O.fromNullable(gqlCtx.getContext<{ user?: User }>().user),
+          TE.fromOption(() => BUG_AUTH_NO_USER_CTX),
+        ),
+      ),
 
-    // Get the invite
+      // Get invite
-    const { inviteID } = gqlExecCtx.getArgs<{ inviteID: string }>();
+      TE.bindW('invite', ({ gqlCtx }) =>
-    if (!inviteID) throwErr(BUG_TEAM_INVITE_NO_INVITE_ID);
+        pipe(
+          O.fromNullable(gqlCtx.getArgs<{ inviteID?: string }>().inviteID),
+          TE.fromOption(() => BUG_TEAM_INVITE_NO_INVITE_ID),
+          TE.chainW(
+            flow(
+              this.teamInviteService.getInvitation,
+              TE.fromTaskOption(() => TEAM_INVITE_NO_INVITE_FOUND),
+            ),
+          ),
+        ),
+      ),
 
-    const invitation = await this.teamInviteService.getInvitation(inviteID);
+      // Check if the emails match
-    if (O.isNone(invitation)) throwErr(TEAM_INVITE_NO_INVITE_FOUND);
+      TE.chainW(
+        TE.fromPredicate(
+          ({ user, invite }) => user.email === invite.inviteeEmail,
+          () => TEAM_INVITE_EMAIL_DO_NOT_MATCH,
+        ),
+      ),
 
-    if (
+      // Fold it to a promise
-      user.email.toLowerCase() !== invitation.value.inviteeEmail.toLowerCase()
+      TE.fold(throwErr, () => T.of(true)),
-    ) {
+    )();
-      throwErr(TEAM_INVITE_EMAIL_DO_NOT_MATCH);
-    }
-
-    return true;
   }
 }

packages/hoppscotch-backend/src/team-invitation/team-teaminvite-ext.resolver.ts

@@ -12,6 +12,6 @@ export class TeamTeamInviteExtResolver {
     complexity: 10,
   })
   teamInvitations(@Parent() team: Team): Promise<TeamInvitation[]> {
-    return this.teamInviteService.getTeamInvitations(team.id);
+    return this.teamInviteService.getAllInvitationsInTeam(team)();
   }
 }

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

@@ -2,7 +2,7 @@ import { HttpStatus } from '@nestjs/common';
 
 /**
  ** Custom interface to handle errors specific to Auth module
- ** Since its REST we need to return the HTTP status code along with the error message
+ ** Since its REST we need to return HTTP status code along with error message
  */
 export type AuthError = {
   message: string;

packages/hoppscotch-common/.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
   env: {
     browser: true,
     node: true,
+    jest: true,
   },
   parserOptions: {
     sourceType: "module",

packages/hoppscotch-common/assets/icons/star-off.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>

packages/hoppscotch-common/locales/af.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Reaksie liggaam",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Opskrifte",
@@ -446,7 +445,6 @@
     "status": "Status",
     "time": "Tyd",
     "title": "Reaksie",
-    "video": "Video",
     "waiting_for_connection": "wag vir verbinding",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/ar.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "هيئة الاستجابة",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "الرؤوس",
@@ -446,7 +445,6 @@
     "status": "حالة",
     "time": "وقت",
     "title": "إجابة",
-    "video": "Video",
     "waiting_for_connection": "في انتظار الاتصال",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/ca.json

@@ -432,7 +432,6 @@
     "view_my_links": "Visualitzar els meus enllaços"
   },
   "response": {
-    "audio": "Audio",
     "body": "Cos de resposta",
     "filter_response_body": "Filtrar el cos de la resposta JSON (utilitza la sintaxi JSONPath)",
     "headers": "Capçaleres",
@@ -446,7 +445,6 @@
     "status": "Estat",
     "time": "Temps",
     "title": "Resposta",
-    "video": "Video",
     "waiting_for_connection": "esperant la connexió",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/cn.json

@@ -432,7 +432,6 @@
     "view_my_links": "查看我的链接"
   },
   "response": {
-    "audio": "Audio",
     "body": "响应体",
     "filter_response_body": "筛选JSON响应本体（使用JSONPath语法）",
     "headers": "响应头",
@@ -446,7 +445,6 @@
     "status": "状态",
     "time": "时间",
     "title": "响应",
-    "video": "Video",
     "waiting_for_connection": "等待连接",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/cs.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Odpovědní orgán",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Záhlaví",
@@ -446,7 +445,6 @@
     "status": "Postavení",
     "time": "Čas",
     "title": "Odezva",
-    "video": "Video",
     "waiting_for_connection": "čekání na připojení",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/da.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Svarorgan",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Overskrifter",
@@ -446,7 +445,6 @@
     "status": "Status",
     "time": "Tid",
     "title": "Respons",
-    "video": "Video",
     "waiting_for_connection": "venter på forbindelse",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/de.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Antworttext",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Header",
@@ -446,7 +445,6 @@
     "status": "Status",
     "time": "Zeit",
     "title": "Antwort",
-    "video": "Video",
     "waiting_for_connection": "auf Verbindung warten",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/el.json

@@ -432,7 +432,6 @@
     "view_my_links": "Προβολή των links μου"
   },
   "response": {
-    "audio": "Audio",
     "body": "Σώμα απόκρισης",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Κεφαλίδες",
@@ -446,7 +445,6 @@
     "status": "Κατάσταση",
     "time": "χρόνος",
     "title": "Απάντηση",
-    "video": "Video",
     "waiting_for_connection": "περιμένοντας τη σύνδεση",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/en.json

@@ -4,7 +4,6 @@
     "cancel": "Cancel",
     "choose_file": "Choose a file",
     "clear": "Clear",
-    "clear_history": "Clear All History",
     "clear_all": "Clear all",
     "close": "Close",
     "connect": "Connect",
@@ -174,7 +173,6 @@
     "folder": "Folder is empty",
     "headers": "This request does not have any headers",
     "history": "History is empty",
-    "history_suggestions": "History does not have any matching entries",
     "invites": "Invite list is empty",
     "members": "Team is empty",
     "parameters": "This request does not have any parameters",
@@ -584,11 +582,6 @@
     "log": "Log",
     "url": "URL"
   },
-  "spotlight": {
-    "section": {
-      "user": "User"
-    }
-  },
   "sse": {
     "event_type": "Event type",
     "log": "Log",

packages/hoppscotch-common/locales/es.json

@@ -432,7 +432,6 @@
     "view_my_links": "Ver mis enlaces"
   },
   "response": {
-    "audio": "Audio",
     "body": "Cuerpo de respuesta",
     "filter_response_body": "Filtrar el cuerpo de la respuesta JSON (utiliza la sintaxis JSONPath)",
     "headers": "Encabezados",
@@ -446,7 +445,6 @@
     "status": "Estado",
     "time": "Tiempo",
     "title": "Respuesta",
-    "video": "Video",
     "waiting_for_connection": "esperando la conexión",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/fi.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Vastauselin",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Otsikot",
@@ -446,7 +445,6 @@
     "status": "Tila",
     "time": "Aika",
     "title": "Vastaus",
-    "video": "Video",
     "waiting_for_connection": "yhteyttä odotellessa",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/fr.json

@@ -432,7 +432,6 @@
     "view_my_links": "Voir mes liens"
   },
   "response": {
-    "audio": "Audio",
     "body": "Corps de réponse",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "En-têtes",
@@ -446,7 +445,6 @@
     "status": "Statut",
     "time": "Temps",
     "title": "Réponse",
-    "video": "Video",
     "waiting_for_connection": "En attente de connexion",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/he.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "גוף תגובה",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "כותרות",
@@ -446,7 +445,6 @@
     "status": "סטָטוּס",
     "time": "זְמַן",
     "title": "תְגוּבָה",
-    "video": "Video",
     "waiting_for_connection": "מחכה לחיבור",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/hi.json

@@ -433,7 +433,6 @@
     "view_my_links": "मेरे लिंक देखें"
   },
   "response": {
-    "audio": "Audio",
     "body": "प्रतिक्रिया निकाय",
     "filter_response_body": "फ़िल्टर JSON रिस्पांस बॉडी (JSONPATH सिंटैक्स का उपयोग करता है)",
     "headers": "हेडर",
@@ -447,7 +446,6 @@
     "status": "दर्जा",
     "time": "समय",
     "title": "जवाब",
-    "video": "Video",
     "waiting_for_connection": "जुडने के लिए इंतजार",
     "xml": "एक्सएमएल"
   },

packages/hoppscotch-common/locales/hu.json

@@ -5,29 +5,29 @@
     "choose_file": "Válasszon egy fájlt",
     "clear": "Törlés",
     "clear_all": "Összes törlése",
-    "close": "Bezárás",
+    "close": "Close",
     "connect": "Kapcsolódás",
-    "connecting": "Kapcsolódás",
+    "connecting": "Connecting",
     "copy": "Másolás",
     "delete": "Törlés",
     "disconnect": "Leválasztás",
     "dismiss": "Eltüntetés",
     "dont_save": "Ne mentse",
     "download_file": "Fájl letöltése",
-    "drag_to_reorder": "Húzza az átrendezéshez",
+    "drag_to_reorder": "Drag to reorder",
     "duplicate": "Kettőzés",
     "edit": "Szerkesztés",
-    "filter": "Szűrő",
+    "filter": "Filter",
     "go_back": "Vissza",
-    "go_forward": "Előre",
+    "go_forward": "Go forward",
-    "group_by": "Csoportosítás",
+    "group_by": "Group by",
     "label": "Címke",
     "learn_more": "Tudjon meg többet",
     "less": "Kevesebb",
     "more": "Több",
     "new": "Új",
     "no": "Nem",
-    "open_workspace": "Munkaterület megnyitása",
+    "open_workspace": "Open workspace",
     "paste": "Beillesztés",
     "prettify": "Csinosítás",
     "remove": "Eltávolítás",
@@ -38,7 +38,7 @@
     "search": "Keresés",
     "send": "Küldés",
     "start": "Indítás",
-    "starting": "Indítás",
+    "starting": "Starting",
     "stop": "Leállítás",
     "to_close": "a bezáráshoz",
     "to_navigate": "a navigáláshoz",
@@ -118,16 +118,16 @@
   },
   "collection": {
     "created": "Gyűjtemény létrehozva",
-    "different_parent": "Nem lehet átrendezni a különböző szülővel rendelkező gyűjteményt",
+    "different_parent": "Cannot reorder collection with different parent",
     "edit": "Gyűjtemény szerkesztése",
     "invalid_name": "Adjon nevet a gyűjteménynek",
-    "invalid_root_move": "A gyűjtemény már a gyökérben van",
+    "invalid_root_move": "Collection already in the root",
-    "moved": "Sikeresen áthelyezve",
+    "moved": "Moved Successfully",
     "my_collections": "Saját gyűjtemények",
     "name": "Saját új gyűjtemény",
     "name_length_insufficient": "A gyűjtemény nevének legalább 3 karakter hosszúságúnak kell lennie",
     "new": "Új gyűjtemény",
-    "order_changed": "Gyűjtemény sorrendje frissítve",
+    "order_changed": "Collection Order Updated",
     "renamed": "Gyűjtemény átnevezve",
     "request_in_use": "A kérés használatban",
     "save_as": "Mentés másként",
@@ -147,7 +147,7 @@
     "remove_team": "Biztosan törölni szeretné ezt a csapatot?",
     "remove_telemetry": "Biztosan ki szeretné kapcsolni a telemetriát?",
     "request_change": "Biztosan el szeretné vetni a jelenlegi kérést? Minden mentetlen változtatás el fog veszni.",
-    "save_unsaved_tab": "Szeretné menteni az ezen a lapon elvégzett változtatásokat?",
+    "save_unsaved_tab": "Do you want to save changes made in this tab?",
     "sync": "Szeretné visszaállítani a munkaterületét a felhőből? Ez el fogja vetni a helyi folyamatát."
   },
   "count": {
@@ -180,8 +180,8 @@
     "profile": "Jelentkezzen be a profilja megtekintéséhez",
     "protocols": "A protokollok üresek",
     "schema": "Kapcsolódjon egy GraphQL-végponthoz a séma megtekintéséhez",
-    "shortcodes": "A rövid kódok üresek",
+    "shortcodes": "Shortcodes are empty",
-    "subscription": "A feliratkozások üresek",
+    "subscription": "Subscriptions are empty",
     "team_name": "A csapat neve üres",
     "teams": "Ön nem tartozik semmilyen csapathoz",
     "tests": "Nincsenek tesztek ehhez a kéréshez"
@@ -194,13 +194,13 @@
     "deleted": "Környezet törlése",
     "edit": "Környezet szerkesztése",
     "invalid_name": "Adjon nevet a környezetnek",
-    "my_environments": "Saját környezetek",
+    "my_environments": "My Environments",
     "nested_overflow": "az egymásba ágyazott környezeti változók 10 szintre vannak korlátozva",
     "new": "Új környezet",
     "no_environment": "Nincs környezet",
     "no_environment_description": "Nem lettek környezetek kiválasztva. Válassza ki, hogy mit kell tenni a következő változókkal.",
     "select": "Környezet kiválasztása",
-    "team_environments": "Csapatkörnyezetek",
+    "team_environments": "Team Environments",
     "title": "Környezetek",
     "updated": "Környezet frissítve",
     "variable_list": "Változólista"
@@ -209,9 +209,9 @@
     "browser_support_sse": "Úgy tűnik, hogy ez a böngésző nem támogatja a kiszolgáló által küldött eseményeket.",
     "check_console_details": "Nézze meg a konzolnaplót a részletekért.",
     "curl_invalid_format": "A cURL nincs megfelelően formázva",
-    "danger_zone": "Veszélyes zóna",
+    "danger_zone": "Danger zone",
-    "delete_account": "Az Ön fiókja jelenleg tulajdonos ezekben a csapatokban:",
+    "delete_account": "Your account is currently an owner in these teams:",
-    "delete_account_description": "El kell távolítani magát, át kell adnia a tulajdonjogot vagy törölnie kell ezeket a csapatokat, mielőtt törölhetné a fiókját.",
+    "delete_account_description": "You must either remove yourself, transfer ownership, or delete these teams before you can delete your account.",
     "empty_req_name": "Üres kérésnév",
     "f12_details": "(F12 a részletekért)",
     "gql_prettify_invalid_query": "Nem sikerült csinosítani egy érvénytelen lekérdezést, oldja meg a lekérdezés szintaktikai hibáit, és próbálja újra",
@@ -219,13 +219,13 @@
     "incorrect_email": "Hibás e-mail",
     "invalid_link": "Érvénytelen hivatkozás",
     "invalid_link_description": "A kattintott hivatkozás érvénytelen vagy lejárt.",
-    "json_parsing_failed": "Érvénytelen JSON",
+    "json_parsing_failed": "Invalid JSON",
     "json_prettify_invalid_body": "Nem sikerült csinosítani egy érvénytelen törzset, oldja meg a JSON szintaktikai hibáit, és próbálja újra",
     "network_error": "Úgy tűnik, hogy hálózati hiba van. Próbálja újra.",
     "network_fail": "Nem sikerült elküldeni a kérést",
     "no_duration": "Nincs időtartam",
-    "no_results_found": "Nincs találat",
+    "no_results_found": "No matches found",
-    "page_not_found": "Ez az oldal nem található",
+    "page_not_found": "This page could not be found",
     "script_fail": "Nem sikerült végrehajtani a kérés előtti parancsfájlt",
     "something_went_wrong": "Valami elromlott",
     "test_script_fail": "Nem sikerült végrehajtani a kérés utáni parancsfájlt"
@@ -238,9 +238,9 @@
     "title": "Exportálás"
   },
   "filter": {
-    "all": "Összes",
+    "all": "All",
-    "none": "Nincs",
+    "none": "None",
-    "starred": "Csillagozott"
+    "starred": "Starred"
   },
   "folder": {
     "created": "Mappa létrehozva",
@@ -256,7 +256,7 @@
     "subscriptions": "Feliratkozások"
   },
   "group": {
-    "time": "Idő",
+    "time": "Time",
     "url": "URL"
   },
   "header": {
@@ -316,32 +316,32 @@
     "zen_mode": "Zen mód"
   },
   "modal": {
-    "close_unsaved_tab": "Elmentetlen változtatásai vannak",
+    "close_unsaved_tab": "You have unsaved changes",
     "collections": "Gyűjtemények",
     "confirm": "Megerősítés",
     "edit_request": "Kérés szerkesztése",
     "import_export": "Importálás és exportálás"
   },
   "mqtt": {
-    "already_subscribed": "Ön már feliratkozott erre a témára.",
+    "already_subscribed": "You are already subscribed to this topic.",
-    "clean_session": "Munkamenet törlése",
+    "clean_session": "Clean Session",
-    "clear_input": "Bevitel törlése",
+    "clear_input": "Clear input",
-    "clear_input_on_send": "Bevitel törlése küldéskor",
+    "clear_input_on_send": "Clear input on send",
-    "client_id": "Ügyfél-azonosító",
+    "client_id": "Client ID",
-    "color": "Válasszon színt",
+    "color": "Pick a color",
     "communication": "Kommunikáció",
-    "connection_config": "Kapcsolat beállításai",
+    "connection_config": "Connection Config",
-    "connection_not_authorized": "Ez az MQTT-kapcsolat nem használ semmilyen hitelesítést.",
+    "connection_not_authorized": "This MQTT connection does not use any authentication.",
-    "invalid_topic": "Adjon témát a feliratkozáshoz",
+    "invalid_topic": "Please provide a topic for the subscription",
-    "keep_alive": "Életben tartás",
+    "keep_alive": "Keep Alive",
     "log": "Napló",
-    "lw_message": "Utolsó kívánság üzenet",
+    "lw_message": "Last-Will Message",
-    "lw_qos": "Utolsó kívánság QoS",
+    "lw_qos": "Last-Will QoS",
-    "lw_retain": "Utolsó kívánság megtartás",
+    "lw_retain": "Last-Will Retain",
-    "lw_topic": "Utolsó kívánság téma",
+    "lw_topic": "Last-Will Topic",
     "message": "Üzenet",
-    "new": "Új feliratkozás",
+    "new": "New Subscription",
-    "not_connected": "Először indítson egy MQTT-kapcsolatot.",
+    "not_connected": "Please start a MQTT connection first.",
     "publish": "Közzététel",
     "qos": "QoS",
     "ssl": "SSL",
@@ -368,7 +368,7 @@
   },
   "profile": {
     "app_settings": "Alkalmazás beállításai",
-    "default_hopp_displayname": "Névtelen felhasználó",
+    "default_hopp_displayname": "Unnamed User",
     "editor": "Szerkesztő",
     "editor_description": "A szerkesztők hozzáadhatnak, szerkeszthetnek és törölhetnek kéréseket.",
     "email_verification_mail": "Egy ellenőrző e-mail el lett küldve az e-mail-címére. Kattintson a hivatkozásra az e-mail-címe ellenőrzéséhez.",
@@ -391,26 +391,26 @@
     "choose_language": "Nyelv kiválasztása",
     "content_type": "Tartalom típusa",
     "content_type_titles": {
-      "others": "Egyebek",
+      "others": "Others",
-      "structured": "Szerkesztett",
+      "structured": "Structured",
-      "text": "Szöveg"
+      "text": "Text"
     },
     "copy_link": "Hivatkozás másolása",
-    "different_collection": "Nem lehet átrendezni a különböző gyűjteményekből érkező kéréseket",
+    "different_collection": "Cannot reorder requests from different collections",
-    "duplicated": "Kérés megkettőzve",
+    "duplicated": "Request duplicated",
     "duration": "Időtartam",
-    "enter_curl": "cURL-parancs megadása",
+    "enter_curl": "cURL megadása",
     "generate_code": "Kód előállítása",
     "generated_code": "Előállított kód",
     "header_list": "Fejléclista",
     "invalid_name": "Adjon nevet a kérésnek",
     "method": "Módszer",
-    "moved": "Kérés áthelyezve",
+    "moved": "Request moved",
     "name": "Kérés neve",
     "new": "Új kérés",
-    "order_changed": "Kérés sorrendje frissítve",
+    "order_changed": "Request Order Updated",
     "override": "Felülbírálás",
-    "override_help": "<kbd>Content-Type</kbd> beállítása a fejlécekben",
+    "override_help": "A <kbd>Content-Type</kbd> beállítása a fejlécekben",
     "overriden": "Felülbírálva",
     "parameter_list": "Lekérdezési paraméterek",
     "parameters": "Paraméterek",
@@ -429,12 +429,11 @@
     "type": "Kérés típusa",
     "url": "URL",
     "variables": "Változók",
-    "view_my_links": "Saját hivatkozások megtekintése"
+    "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Hang",
     "body": "Válasz törzse",
-    "filter_response_body": "JSON-válasz törzsének szűrése (JSONPath szintaxist használ)",
+    "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Fejlécek",
     "html": "HTML",
     "image": "Kép",
@@ -446,14 +445,13 @@
     "status": "Állapot",
     "time": "Idő",
     "title": "Válasz",
-    "video": "Videó",
     "waiting_for_connection": "várakozás kapcsolódásra",
     "xml": "XML"
   },
   "settings": {
     "accent_color": "Kiemelőszín",
     "account": "Fiók",
-    "account_deleted": "A fiókja törölve lett",
+    "account_deleted": "Your account has been deleted",
     "account_description": "A fiókbeállítások személyre szabása.",
     "account_email_description": "Az Ön elsődleges e-mail-címe.",
     "account_name_description": "Ez a megjelenített neve.",
@@ -462,8 +460,8 @@
     "change_font_size": "Betűméret megváltoztatása",
     "choose_language": "Nyelv kiválasztása",
     "dark_mode": "Sötét",
-    "delete_account": "Fiók törlése",
+    "delete_account": "Delete account",
-    "delete_account_description": "Ha törli a fiókját, akkor az összes adata véglegesen törlésre kerül. Ezt a műveletet nem lehet visszavonni.",
+    "delete_account_description": "Once you delete your account, all your data will be permanently deleted. This action cannot be undone.",
     "expand_navigation": "Navigáció kinyitása",
     "experiments": "Kísérletek",
     "experiments_notice": "Ez olyan kísérletek gyűjteménye, amelyeken dolgozunk, és amelyek hasznosak, szórakoztatóak lehetnek, mindkettő, vagy egyik sem. Ezek nem véglegesek és nem stabilak, ezért ha valami túl furcsa dolog történik, ne essen pánikba. Egyszerűen kapcsolja ki a hibás dolgot. Viccet félretéve, ",
@@ -490,8 +488,8 @@
     "proxy_use_toggle": "A proxy középprogram használata a kérések küldéséhez",
     "read_the": "Olvassa el:",
     "reset_default": "Visszaállítás az alapértelmezettre",
-    "short_codes": "Rövid kódok",
+    "short_codes": "Short codes",
-    "short_codes_description": "Az Ön által létrehozott rövid kódok.",
+    "short_codes_description": "Short codes which were created by you.",
     "sidebar_on_left": "Oldalsáv a bal oldalon",
     "sync": "Szinkronizálás",
     "sync_collections": "Gyűjtemények",
@@ -505,16 +503,16 @@
     "theme_description": "Az alkalmazás témájának személyre szabása.",
     "use_experimental_url_bar": "Kísérleti URL-sáv használata a környezet kiemelésével",
     "user": "Felhasználó",
-    "verified_email": "Ellenőrzött e-mail-cím",
+    "verified_email": "Verified email",
     "verify_email": "E-mail-cím ellenőrzése"
   },
   "shortcodes": {
-    "actions": "Műveletek",
+    "actions": "Actions",
-    "created_on": "Létrehozva",
+    "created_on": "Created on",
-    "deleted": "Rövid kód törölve",
+    "deleted": "Shortcode deleted",
-    "method": "Módszer",
+    "method": "Method",
-    "not_found": "A rövid kód nem található",
+    "not_found": "Shortcode not found",
-    "short_code": "Rövid kód",
+    "short_code": "Short code",
     "url": "URL"
   },
   "shortcut": {
@@ -556,9 +554,9 @@
       "title": "Kérés"
     },
     "response": {
-      "copy": "Válasz másolása a vágólapra",
+      "copy": "Copy response to clipboard",
-      "download": "Válasz letöltés fájlként",
+      "download": "Download response as file",
-      "title": "Válasz"
+      "title": "Response"
     },
     "theme": {
       "black": "Téma átváltása fekete módra",
@@ -576,8 +574,8 @@
   },
   "socketio": {
     "communication": "Kommunikáció",
-    "connection_not_authorized": "Ez a SocketIO-kapcsolat nem használ semmilyen hitelesítést.",
+    "connection_not_authorized": "This SocketIO connection does not use any authentication.",
-    "event_name": "Esemény vagy téma neve",
+    "event_name": "Esemény neve",
     "events": "Események",
     "log": "Napló",
     "url": "URL"
@@ -594,9 +592,9 @@
     "connected": "Kapcsolódva",
     "connected_to": "Kapcsolódva ehhez: {name}",
     "connecting_to": "Kapcsolódás ehhez: {name}…",
-    "connection_error": "Nem sikerült kapcsolódni",
+    "connection_error": "Failed to connect",
-    "connection_failed": "A kapcsolódás sikertelen",
+    "connection_failed": "Connection failed",
-    "connection_lost": "A kapcsolat elveszett",
+    "connection_lost": "Connection lost",
     "copied_to_clipboard": "Vágólapra másolva",
     "deleted": "Törölve",
     "deprecated": "ELAVULT",
@@ -611,17 +609,17 @@
     "history_deleted": "Előzmények törölve",
     "linewrap": "Sorok tördelése",
     "loading": "Betöltés…",
-    "message_received": "Üzenet: {message} érkezett ehhez a témához: {topic}",
+    "message_received": "Message: {message} arrived on topic: {topic}",
-    "mqtt_subscription_failed": "Valami elromlott a következő témára való feliratkozás során: {topic}",
+    "mqtt_subscription_failed": "Something went wrong while subscribing to topic: {topic}",
     "none": "Nincs",
     "nothing_found": "Semmi sem található ehhez:",
-    "published_error": "Valami elromlott a következő üzenet közzététele során: {topic}, ehhez a témához: {message}",
+    "published_error": "Something went wrong while publishing msg: {topic} to topic: {message}",
-    "published_message": "Közzétett üzenet: {message}, ehhez a témához: {topic}",
+    "published_message": "Published message: {message} to topic: {topic}",
-    "reconnection_error": "Nem sikerült újrakapcsolódni",
+    "reconnection_error": "Failed to reconnect",
-    "subscribed_failed": "Nem sikerült feliratkozni erre a témára: {topic}",
+    "subscribed_failed": "Failed to subscribe to topic: {topic}",
-    "subscribed_success": "Sikeresen feliratkozott erre a témára: {topic}",
+    "subscribed_success": "Successfully subscribed to topic: {topic}",
-    "unsubscribed_failed": "Nem sikerült leiratkozni erről a témáról: {topic}",
+    "unsubscribed_failed": "Failed to unsubscribe from topic: {topic}",
-    "unsubscribed_success": "Sikeresen leiratkozott erről a témáról: {topic}",
+    "unsubscribed_success": "Successfully unsubscribed from topic: {topic}",
     "waiting_send_request": "Várakozás a kérés elküldésére"
   },
   "support": {
@@ -641,7 +639,7 @@
     "body": "Törzs",
     "collections": "Gyűjtemények",
     "documentation": "Dokumentáció",
-    "environments": "Környezetek",
+    "environments": "Environments",
     "headers": "Fejlécek",
     "history": "Előzmények",
     "mqtt": "MQTT",
@@ -666,7 +664,7 @@
     "email_do_not_match": "Az e-mail-cím nem egyezik a fiókja részleteivel. Vegye fel a kapcsolatot a csapat tulajdonosával.",
     "exit": "Kilépés a csapatból",
     "exit_disabled": "Csak a tulajdonos nem léphet ki a csapatból",
-    "invalid_coll_id": "Érvénytelen gyűjteményazonosító",
+    "invalid_coll_id": "Invalid collection ID",
     "invalid_email_format": "Az e-mail formátuma érvénytelen",
     "invalid_id": "Érvénytelen csapatazonosító. Vegye fel a kapcsolatot a csapat tulajdonosával.",
     "invalid_invite_link": "Érvénytelen meghívási hivatkozás",
@@ -690,7 +688,7 @@
     "member_removed": "Felhasználó eltávolítva",
     "member_role_updated": "Felhasználói szerepek frissítve",
     "members": "Tagok",
-    "more_members": "+{count} további",
+    "more_members": "+{count} more",
     "name_length_insufficient": "A csapat nevének legalább 6 karakter hosszúságúnak kell lennie",
     "name_updated": "Csapatnév frissítve",
     "new": "Új csapat",
@@ -698,13 +696,13 @@
     "new_name": "Saját új csapat",
     "no_access": "Nincs szerkesztési jogosultsága ezekhez a gyűjteményekhez",
     "no_invite_found": "A meghívás nem található. Vegye fel a kapcsolatot a csapat tulajdonosával.",
-    "no_request_found": "A kérés nem található.",
+    "no_request_found": "Request not found.",
     "not_found": "A csapat nem található. Vegye fel a kapcsolatot a csapat tulajdonosával.",
     "not_valid_viewer": "Ön nem érvényes megtekintő. Vegye fel a kapcsolatot a csapat tulajdonosával.",
-    "parent_coll_move": "Nem lehet áthelyezni a gyűjteményt egy gyermekgyűjteménybe",
+    "parent_coll_move": "Cannot move collection to a child collection",
     "pending_invites": "Függőben lévő meghívások",
     "permissions": "Jogosultságok",
-    "same_target_destination": "Ugyanaz a cél és célhely",
+    "same_target_destination": "Same target and destination",
     "saved": "Csapat elmentve",
     "select_a_team": "Csapat kiválasztása",
     "title": "Csapatok",
@@ -712,9 +710,9 @@
     "we_sent_invite_link_description": "Kérje meg az összes meghívottat, hogy nézzék meg a beérkező leveleiket. Kattintsanak a hivatkozásra a csapathoz való csatlakozáshoz."
   },
   "team_environment": {
-    "deleted": "Környezet törölve",
+    "deleted": "Environment Deleted",
-    "duplicate": "Környezet megkettőzve",
+    "duplicate": "Environment Duplicated",
-    "not_found": "A környezet nem található."
+    "not_found": "Environment not found."
   },
   "test": {
     "failed": "teszt sikertelen",
@@ -734,9 +732,9 @@
     "url": "URL"
   },
   "workspace": {
-    "change": "Munkaterület váltása",
+    "change": "Change workspace",
-    "personal": "Saját munkaterület",
+    "personal": "My Workspace",
-    "team": "Csapat-munkaterület",
+    "team": "Team Workspace",
-    "title": "Munkaterületek"
+    "title": "Workspaces"
   }
 }

packages/hoppscotch-common/locales/id.json

@@ -432,7 +432,6 @@
     "view_my_links": "Lihat tautan saya"
   },
   "response": {
-    "audio": "Audio",
     "body": "Response Body",
     "filter_response_body": "Filter body respons JSON (menggunakan sintaks JSONPath)",
     "headers": "Headers",
@@ -446,7 +445,6 @@
     "status": "Status",
     "time": "Waktu",
     "title": "Response",
-    "video": "Video",
     "waiting_for_connection": "Menunggu koneksi",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/it.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Corpo della risposta",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Intestazioni",
@@ -446,7 +445,6 @@
     "status": "Stato",
     "time": "Tempo impiegato",
     "title": "Risposta",
-    "video": "Video",
     "waiting_for_connection": "In attesa di connessione",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/ja.json

@@ -432,7 +432,6 @@
     "view_my_links": "自分のリンクを見る"
   },
   "response": {
-    "audio": "Audio",
     "body": "レスポンスボディ",
     "filter_response_body": "JSONレスポンスボディをフィルタ (JSONPathシンタックスを使用)",
     "headers": "ヘッダー",
@@ -446,7 +445,6 @@
     "status": "ステータス",
     "time": "時間",
     "title": "レスポンス",
-    "video": "Video",
     "waiting_for_connection": "接続を待っています",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/ko.json

@@ -432,7 +432,6 @@
     "view_my_links": "내 링크 보기"
   },
   "response": {
-    "audio": "Audio",
     "body": "응답 본문",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "헤더",
@@ -446,7 +445,6 @@
     "status": "상태",
     "time": "시간",
     "title": "제목",
-    "video": "Video",
     "waiting_for_connection": "연결 대기 중",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/nl.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Reactie inhoud",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Headers",
@@ -446,7 +445,6 @@
     "status": "Status",
     "time": "Tijd",
     "title": "Antwoord",
-    "video": "Video",
     "waiting_for_connection": "wachten op verbinding",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/no.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Svarkropp",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Overskrifter",
@@ -446,7 +445,6 @@
     "status": "Status",
     "time": "Tid",
     "title": "Respons",
-    "video": "Video",
     "waiting_for_connection": "venter på tilkobling",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/pl.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Ciało odpowiedzi",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Nagłówki",
@@ -446,7 +445,6 @@
     "status": "Status",
     "time": "Czas",
     "title": "Odpowiedź",
-    "video": "Video",
     "waiting_for_connection": "oczekiwanie na połączenie",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/pt-br.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Corpo de Resposta",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Cabeçalhos",
@@ -446,7 +445,6 @@
     "status": "Status",
     "time": "Tempo",
     "title": "Resposta",
-    "video": "Video",
     "waiting_for_connection": "aguardando conexão",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/pt.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Corpo de Resposta",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Cabeçalhos",
@@ -446,7 +445,6 @@
     "status": "Status",
     "time": "Tempo",
     "title": "Resposta",
-    "video": "Video",
     "waiting_for_connection": "aguardando conexão",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/ro.json

@@ -432,7 +432,6 @@
     "view_my_links": "Vizualizare link-uri"
   },
   "response": {
-    "audio": "Audio",
     "body": "Corpul de răspuns",
     "filter_response_body": "Filtrează corpul răspunsului JSON (folosește sintaxa JSONPath)",
     "headers": "Anteturi",
@@ -446,7 +445,6 @@
     "status": "Stare",
     "time": "Timp",
     "title": "Raspuns",
-    "video": "Video",
     "waiting_for_connection": "Așteptând conexiunea",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/ru.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Тело ответа",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Заголовки",
@@ -446,7 +445,6 @@
     "status": "Статус",
     "time": "Время",
     "title": "Ответ",
-    "video": "Video",
     "waiting_for_connection": "Ожидание соединения",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/sr.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Тело за одговор",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Заглавља",
@@ -446,7 +445,6 @@
     "status": "Статус",
     "time": "време",
     "title": "Одговор",
-    "video": "Video",
     "waiting_for_connection": "чека везу",
     "xml": "КСМЛ"
   },

packages/hoppscotch-common/locales/sv.json

@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Svarskommitté",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Rubriker",
@@ -446,7 +445,6 @@
     "status": "Status",
     "time": "Tid",
     "title": "Svar",
-    "video": "Video",
     "waiting_for_connection": "väntar på anslutning",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/tr.json

@@ -122,7 +122,7 @@
     "edit": "Koleksiyonu düzenle",
     "invalid_name": "Lütfen koleksiyon için geçerli bir ad girin",
     "invalid_root_move": "Collection already in the root",
-    "moved": "Başarıyla taşındı",
+    "moved": "Moved Successfully",
     "my_collections": "Koleksiyonlarım",
     "name": "Yeni Koleksiyonum",
     "name_length_insufficient": "Koleksiyon adı en az 3 karakter uzunluğunda olmalıdır",
@@ -147,7 +147,7 @@
     "remove_team": "Bu takımı silmek istediğinizden emin misiniz?",
     "remove_telemetry": "Telemetriden çıkmak istediğinizden emin misiniz?",
     "request_change": "Are you sure you want to discard current request, unsaved changes will be lost.",
-    "save_unsaved_tab": "Bu sekmede yapılan değişiklikleri kaydetmek istiyor musunuz?",
+    "save_unsaved_tab": "Do you want to save changes made in this tab?",
     "sync": "Bu çalışma alanını senkronize etmek istediğinizden emin misiniz?"
   },
   "count": {
@@ -368,9 +368,9 @@
   },
   "profile": {
     "app_settings": "Uygulama ayarları",
-    "default_hopp_displayname": "Adsız Kullanıcı",
+    "default_hopp_displayname": "Unnamed User",
-    "editor": "Editör",
+    "editor": "Düzenleyici",
-    "editor_description": "Editörler istekleri ekleyebilir, düzenleyebilir ve silebilir.",
+    "editor_description": "Editors can add, edit, and delete requests.",
     "email_verification_mail": "Doğrulama bağlantısı e-postanıza gönderildi. E-postanızı doğrulamak için gelen bağlantıya tıklayınız.",
     "no_permission": "Bu eylemi gerçekleştirmek için gerekli yetkiniz yok.",
     "owner": "Kurucu",
@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Yanıt gövdesi",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Başlıklar",
@@ -446,7 +445,6 @@
     "status": "Durum",
     "time": "Zaman",
     "title": "Cevap",
-    "video": "Video",
     "waiting_for_connection": "Bağlantı için bekleniyor",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/tw.json

@@ -432,7 +432,6 @@
     "view_my_links": "檢視我的連結"
   },
   "response": {
-    "audio": "Audio",
     "body": "回應本體",
     "filter_response_body": "篩選 JSON 回應本體 (使用 JSONPath 語法)",
     "headers": "回應標頭",
@@ -446,7 +445,6 @@
     "status": "狀態",
     "time": "時間",
     "title": "回應",
-    "video": "Video",
     "waiting_for_connection": "等待連線",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/uk.json

@@ -432,7 +432,6 @@
     "view_my_links": "Переглянути мої посилання"
   },
   "response": {
-    "audio": "Audio",
     "body": "Орган реагування",
     "filter_response_body": "Фільтр тіла відповідей JSON (використовує синтаксис JSONPath)",
     "headers": "Заголовки",
@@ -446,7 +445,6 @@
     "status": "Статус",
     "time": "Час",
     "title": "Відповідь",
-    "video": "Video",
     "waiting_for_connection": "очікування підключення",
     "xml": "XML"
   },

packages/hoppscotch-common/locales/vi.json

@@ -4,7 +4,7 @@
     "cancel": "Hủy bỏ",
     "choose_file": "Chọn một tệp",
     "clear": "Thông thoáng",
-    "clear_all": "Quet sạch tất cả",
+    "clear_all": "Quet sạch tât cả",
     "close": "Close",
     "connect": "Liên kết",
     "connecting": "Connecting",
@@ -432,7 +432,6 @@
     "view_my_links": "View my links"
   },
   "response": {
-    "audio": "Audio",
     "body": "Cơ quan phản hồi",
     "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Tiêu đề",
@@ -446,7 +445,6 @@
     "status": "Tình trạng",
     "time": "Thời gian",
     "title": "Phản ứng",
-    "video": "Video",
     "waiting_for_connection": "Đang đợi kết nối",
     "xml": "XML"
   },

packages/hoppscotch-common/package.json

@@ -1,11 +1,9 @@
 {
   "name": "@hoppscotch/common",
   "private": true,
-  "version": "2023.4.7",
+  "version": "2023.4.5",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
-    "test": "vitest --run",
-    "test:watch": "vitest",
     "dev:vite": "vite",
     "dev:gql-codegen": "graphql-codegen --require dotenv/config --config gql-codegen.yml --watch dotenv_config_path=\"../../.env\"",
     "lint": "eslint src --ext .ts,.js,.vue --ignore-path .gitignore .",
@@ -15,7 +13,6 @@
     "preview": "vite preview",
     "gql-codegen": "graphql-codegen --require dotenv/config --config gql-codegen.yml dotenv_config_path=\"../../.env\"",
     "postinstall": "pnpm run gql-codegen",
-    "do-test": "pnpm run test",
     "do-lint": "pnpm run prod-lint",
     "do-typecheck": "pnpm run lint",
     "do-lintfix": "pnpm run lintfix"
@@ -46,12 +43,11 @@
     "@urql/exchange-auth": "^0.1.7",
     "@urql/exchange-graphcache": "^4.4.3",
     "@vitejs/plugin-legacy": "^2.3.0",
-    "@vueuse/core": "^8.9.4",
+    "@vueuse/core": "^8.7.5",
     "@vueuse/head": "^0.7.9",
     "acorn-walk": "^8.2.0",
     "axios": "^0.21.4",
     "buffer": "^6.0.3",
-    "dioc": "workspace:^",
     "esprima": "^4.0.1",
     "events": "^3.3.0",
     "fp-ts": "^2.12.1",
@@ -67,7 +63,6 @@
     "jsonpath-plus": "^7.0.0",
     "lodash-es": "^4.17.21",
     "lossless-json": "^2.0.8",
-    "minisearch": "^6.1.0",
     "nprogress": "^0.2.0",
     "paho-mqtt": "^1.1.0",
     "path": "^0.12.7",
@@ -113,7 +108,6 @@
     "@graphql-typed-document-node/core": "^3.1.1",
     "@iconify-json/lucide": "^1.1.40",
     "@intlify/vite-plugin-vue-i18n": "^7.0.0",
-    "@relmify/jest-fp-ts": "^2.1.1",
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash-es": "^4.17.6",
@@ -148,11 +142,10 @@
     "vite-plugin-html-config": "^1.0.10",
     "vite-plugin-inspect": "^0.7.4",
     "vite-plugin-pages": "^0.26.0",
-    "vite-plugin-pages-sitemap": "^1.4.5",
+    "vite-plugin-pages-sitemap": "^1.4.0",
     "vite-plugin-pwa": "^0.13.1",
     "vite-plugin-vue-layouts": "^0.7.0",
     "vite-plugin-windicss": "^1.8.8",
-    "vitest": "^0.32.2",
     "vue-tsc": "^0.38.2",
     "windicss": "^3.5.6"
   }

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

@@ -11,21 +11,20 @@ declare module '@vue/runtime-core' {
     AppAnnouncement: typeof import('./components/app/Announcement.vue')['default']
     AppDeveloperOptions: typeof import('./components/app/DeveloperOptions.vue')['default']
     AppFooter: typeof import('./components/app/Footer.vue')['default']
+    AppFuse: typeof import('./components/app/Fuse.vue')['default']
     AppGitHubStarButton: typeof import('./components/app/GitHubStarButton.vue')['default']
     AppHeader: typeof import('./components/app/Header.vue')['default']
     AppInterceptor: typeof import('./components/app/Interceptor.vue')['default']
     AppLogo: typeof import('./components/app/Logo.vue')['default']
     AppOptions: typeof import('./components/app/Options.vue')['default']
     AppPaneLayout: typeof import('./components/app/PaneLayout.vue')['default']
+    AppPowerSearch: typeof import('./components/app/PowerSearch.vue')['default']
+    AppPowerSearchEntry: typeof import('./components/app/PowerSearchEntry.vue')['default']
     AppShare: typeof import('./components/app/Share.vue')['default']
     AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default']
     AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
     AppShortcutsPrompt: typeof import('./components/app/ShortcutsPrompt.vue')['default']
     AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
-    AppSpotlight: typeof import('./components/app/spotlight/index.vue')['default']
-    AppSpotlightEntry: typeof import('./components/app/spotlight/Entry.vue')['default']
-    AppSpotlightEntryGQLHistory: typeof import('./components/app/spotlight/entry/GQLHistory.vue')['default']
-    AppSpotlightEntryRESTHistory: typeof import('./components/app/spotlight/entry/RESTHistory.vue')['default']
     AppSupport: typeof import('./components/app/Support.vue')['default']
     ButtonPrimary: typeof import('./../../hoppscotch-ui/src/components/button/Primary.vue')['default']
     ButtonSecondary: typeof import('./../../hoppscotch-ui/src/components/button/Secondary.vue')['default']
@@ -87,7 +86,6 @@ declare module '@vue/runtime-core' {
     HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
     HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
     HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
-    HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
     HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing']
     HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
     HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
@@ -136,13 +134,11 @@ declare module '@vue/runtime-core' {
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
     LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
     LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
-    LensesRenderersAudioLensRenderer: typeof import('./components/lenses/renderers/AudioLensRenderer.vue')['default']
     LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']
     LensesRenderersImageLensRenderer: typeof import('./components/lenses/renderers/ImageLensRenderer.vue')['default']
     LensesRenderersJSONLensRenderer: typeof import('./components/lenses/renderers/JSONLensRenderer.vue')['default']
     LensesRenderersPDFLensRenderer: typeof import('./components/lenses/renderers/PDFLensRenderer.vue')['default']
     LensesRenderersRawLensRenderer: typeof import('./components/lenses/renderers/RawLensRenderer.vue')['default']
-    LensesRenderersVideoLensRenderer: typeof import('./components/lenses/renderers/VideoLensRenderer.vue')['default']
     LensesRenderersXMLLensRenderer: typeof import('./components/lenses/renderers/XMLLensRenderer.vue')['default']
     LensesResponseBodyRenderer: typeof import('./components/lenses/ResponseBodyRenderer.vue')['default']
     ProfileShortcode: typeof import('./components/profile/Shortcode.vue')['default']
@@ -169,7 +165,6 @@ declare module '@vue/runtime-core' {
     SmartLink: typeof import('./../../hoppscotch-ui/src/components/smart/Link.vue')['default']
     SmartModal: typeof import('./../../hoppscotch-ui/src/components/smart/Modal.vue')['default']
     SmartPicture: typeof import('./../../hoppscotch-ui/src/components/smart/Picture.vue')['default']
-    SmartPlaceholder: typeof import('./../../hoppscotch-ui/src/components/smart/Placeholder.vue')['default']
     SmartProgressRing: typeof import('./../../hoppscotch-ui/src/components/smart/ProgressRing.vue')['default']
     SmartRadio: typeof import('./../../hoppscotch-ui/src/components/smart/Radio.vue')['default']
     SmartRadioGroup: typeof import('./../../hoppscotch-ui/src/components/smart/RadioGroup.vue')['default']

packages/hoppscotch-common/src/components/app/Footer.vue

@@ -152,7 +152,7 @@
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
           :title="`${t(
             'app.shortcuts'
-          )} <kbd>${getSpecialKey()}</kbd><kbd>/</kbd>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>K</kbd>`"
           :icon="IconZap"
           @click="invokeAction('flyouts.keybinds.toggle')"
         />

packages/hoppscotch-common/src/components/app/Fuse.vue

@@ -0,0 +1,70 @@
+<template>
+  <div key="outputHash" class="flex flex-col flex-1 overflow-auto">
+    <div class="flex flex-col">
+      <AppPowerSearchEntry
+        v-for="(shortcut, shortcutIndex) in searchResults"
+        :key="`shortcut-${shortcutIndex}`"
+        :active="shortcutIndex === selectedEntry"
+        :shortcut="shortcut.item"
+        @action="emit('action', shortcut.item.action)"
+        @mouseover="selectedEntry = shortcutIndex"
+      />
+    </div>
+    <div
+      v-if="searchResults.length === 0"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+    >
+      <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+      <span class="my-2 text-center">
+        {{ t("state.nothing_found") }} "{{ search }}"
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onUnmounted, onMounted } from "vue"
+import Fuse from "fuse.js"
+import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
+import { HoppAction } from "~/helpers/actions"
+import { useI18n } from "@composables/i18n"
+
+const t = useI18n()
+
+const props = defineProps<{
+  input: Record<string, any>[]
+  search: string
+}>()
+
+const emit = defineEmits<{
+  (e: "action", action: HoppAction): void
+}>()
+
+const options = {
+  keys: ["keys", "label", "action", "tags"],
+}
+
+const fuse = new Fuse(props.input, options)
+
+const searchResults = computed(() => fuse.search(props.search))
+
+const searchResultsItems = computed(() =>
+  searchResults.value.map((searchResult) => searchResult.item)
+)
+
+const emitSearchAction = (action: HoppAction) => emit("action", action)
+
+const { bindArrowKeysListeners, unbindArrowKeysListeners, selectedEntry } =
+  useArrowKeysNavigation(searchResultsItems, {
+    onEnter: emitSearchAction,
+    stopPropagation: true,
+  })
+
+onMounted(() => {
+  bindArrowKeysListeners()
+})
+
+onUnmounted(() => {
+  unbindArrowKeysListeners()
+})
+</script>

packages/hoppscotch-common/src/components/app/Header.vue

@@ -20,9 +20,7 @@
       <div class="inline-flex items-center space-x-2">
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
-          :title="`${t(
+          :title="`${t('app.search')} <kbd>/</kbd>`"
-            'app.search'
-          )} <kbd>${getPlatformSpecialKey()}</kbd> <kbd>K</kbd>`"
           :icon="IconSearch"
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click="invokeAction('modals.search.toggle')"
@@ -244,12 +242,11 @@ import { pwaDefferedPrompt, installPWA } from "@modules/pwa"
 import { platform } from "~/platform"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
-import { defineActionHandler, invokeAction } from "@helpers/actions"
+import { invokeAction } from "@helpers/actions"
 import { workspaceStatus$, updateWorkspaceTeamName } from "~/newstore/workspace"
 import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { onLoggedIn } from "~/composables/auth"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
 
 const t = useI18n()
 
@@ -377,12 +374,4 @@ const profile = ref<any | null>(null)
 const settings = ref<any | null>(null)
 const logout = ref<any | null>(null)
 const accountActions = ref<any | null>(null)
-
-defineActionHandler(
-  "user.login",
-  () => {
-    invokeAction("modals.login.toggle")
-  },
-  computed(() => !currentUser.value)
-)
 </script>

packages/hoppscotch-common/src/components/app/PowerSearch.vue

@@ -0,0 +1,122 @@
+<template>
+  <HoppSmartModal
+    v-if="show"
+    styles="sm:max-w-lg"
+    full-width
+    @close="emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col border-b transition border-dividerLight">
+        <input
+          id="command"
+          v-model="search"
+          v-focus
+          type="text"
+          autocomplete="off"
+          name="command"
+          :placeholder="`${t('app.type_a_command_search')}`"
+          class="flex flex-shrink-0 p-6 text-base bg-transparent text-secondaryDark"
+        />
+        <div
+          class="flex flex-shrink-0 text-tiny text-secondaryLight px-4 pb-4 justify-between whitespace-nowrap overflow-auto <sm:hidden"
+        >
+          <div class="flex items-center">
+            <kbd class="shortcut-key">↑</kbd>
+            <kbd class="shortcut-key">↓</kbd>
+            <span class="ml-2 truncate">
+              {{ t("action.to_navigate") }}
+            </span>
+            <kbd class="shortcut-key">↩</kbd>
+            <span class="ml-2 truncate">
+              {{ t("action.to_select") }}
+            </span>
+          </div>
+          <div class="flex items-center">
+            <kbd class="shortcut-key">ESC</kbd>
+            <span class="ml-2 truncate">
+              {{ t("action.to_close") }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <AppFuse
+        v-if="search && show"
+        :input="fuse"
+        :search="search"
+        @action="runAction"
+      />
+      <div
+        v-else
+        class="flex flex-col flex-1 overflow-auto space-y-4 divide-y divide-dividerLight"
+      >
+        <div
+          v-for="(map, mapIndex) in mappings"
+          :key="`map-${mapIndex}`"
+          class="flex flex-col"
+        >
+          <h5 class="px-6 py-2 my-2 text-secondaryLight">
+            {{ t(map.section) }}
+          </h5>
+          <AppPowerSearchEntry
+            v-for="(shortcut, shortcutIndex) in map.shortcuts"
+            :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
+            :shortcut="shortcut"
+            :active="shortcutsItems.indexOf(shortcut) === selectedEntry"
+            @action="runAction"
+            @mouseover="selectedEntry = shortcutsItems.indexOf(shortcut)"
+          />
+        </div>
+      </div>
+    </template>
+  </HoppSmartModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue"
+import { HoppAction, invokeAction } from "~/helpers/actions"
+import { spotlight as mappings, fuse } from "@helpers/shortcuts"
+import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
+import { useI18n } from "@composables/i18n"
+
+const t = useI18n()
+
+const props = defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const search = ref("")
+
+const hideModal = () => {
+  search.value = ""
+  emit("hide-modal")
+}
+
+const runAction = (command: HoppAction) => {
+  invokeAction(command)
+  hideModal()
+}
+
+const shortcutsItems = computed(() =>
+  mappings.reduce(
+    (shortcuts, section) => [...shortcuts, ...section.shortcuts],
+    []
+  )
+)
+
+const { bindArrowKeysListeners, unbindArrowKeysListeners, selectedEntry } =
+  useArrowKeysNavigation(shortcutsItems, {
+    onEnter: runAction,
+  })
+
+watch(
+  () => props.show,
+  (show) => {
+    if (show) bindArrowKeysListeners()
+    else unbindArrowKeysListeners()
+  }
+)
+</script>

packages/hoppscotch-common/src/components/app/PowerSearchEntry.vue

@@ -0,0 +1,68 @@
+<template>
+  <button
+    class="flex items-center flex-1 px-6 py-3 font-medium transition cursor-pointer search-entry focus:outline-none"
+    :class="{ active: active }"
+    tabindex="-1"
+    @click="emit('action', shortcut.action)"
+    @keydown.enter="emit('action', shortcut.action)"
+  >
+    <component
+      :is="shortcut.icon"
+      class="mr-4 transition opacity-50 svg-icons"
+      :class="{ 'opacity-100 text-secondaryDark': active }"
+    />
+    <span
+      class="flex flex-1 mr-4 transition"
+      :class="{ 'text-secondaryDark': active }"
+    >
+      {{ t(shortcut.label) }}
+    </span>
+    <kbd
+      v-for="(key, keyIndex) in shortcut.keys"
+      :key="`key-${String(keyIndex)}`"
+      class="shortcut-key"
+    >
+      {{ key }}
+    </kbd>
+  </button>
+</template>
+
+<script setup lang="ts">
+import type { Component } from "vue"
+import { useI18n } from "@composables/i18n"
+
+const t = useI18n()
+
+defineProps<{
+  shortcut: {
+    label: string
+    keys: string[]
+    action: string
+    icon: object | Component
+  }
+  active: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "action", action: string): void
+}>()
+</script>
+
+<style lang="scss" scoped>
+.search-entry {
+  @apply relative;
+  @apply after:absolute;
+  @apply after:top-0;
+  @apply after:left-0;
+  @apply after:bottom-0;
+  @apply after:bg-transparent;
+  @apply after:z-2;
+  @apply after:w-0.5;
+  @apply after:content-DEFAULT;
+
+  &.active {
+    @apply bg-primaryLight;
+    @apply after:bg-accentLight;
+  }
+}
+</style>

packages/hoppscotch-common/src/components/app/Shortcuts.vue

@@ -14,14 +14,10 @@
           />
         </div>
       </div>
-      <div class="flex flex-col divide-y divide-dividerLight">
+      <div v-if="filterText" class="flex flex-col divide-y divide-dividerLight">
-        <HoppSmartPlaceholder v-if="isEmpty(shortcutsResults)">
-          <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
-        </HoppSmartPlaceholder>
         <details
-          v-for="(sectionResults, sectionTitle) in shortcutsResults"
+          v-for="(map, mapIndex) in searchResults"
-          v-else
+          :key="`map-${mapIndex}`"
-          :key="`section-${sectionTitle}`"
           class="flex flex-col"
           open
         >
@@ -32,28 +28,62 @@
             <span
               class="font-semibold truncate capitalize-first text-secondaryDark"
             >
-              {{ sectionTitle }}
+              {{ t(map.item.section) }}
             </span>
           </summary>
           <div class="flex flex-col px-6 pb-4 space-y-2">
             <AppShortcutsEntry
-              v-for="(shortcut, index) in sectionResults"
+              v-for="(shortcut, index) in map.item.shortcuts"
               :key="`shortcut-${index}`"
               :shortcut="shortcut"
             />
           </div>
         </details>
+        <div
+          v-if="searchResults.length === 0"
+          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+        >
+          <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+          <span class="my-2 text-center">
+            {{ t("state.nothing_found") }} "{{ filterText }}"
+          </span>
+        </div>
+      </div>
+      <div v-else class="flex flex-col divide-y divide-dividerLight">
+        <details
+          v-for="(map, mapIndex) in mappings"
+          :key="`map-${mapIndex}`"
+          class="flex flex-col"
+          open
+        >
+          <summary
+            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
+          >
+            <icon-lucide-chevron-right class="mr-2 indicator" />
+            <span
+              class="font-semibold truncate capitalize-first text-secondaryDark"
+            >
+              {{ t(map.section) }}
+            </span>
+          </summary>
+          <div class="flex flex-col px-6 pb-4 space-y-2">
+            <AppShortcutsEntry
+              v-for="(shortcut, shortcutIndex) in map.shortcuts"
+              :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
+              :shortcut="shortcut"
+            />
+          </div>
+        </details>
       </div>
     </template>
   </HoppSmartSlideOver>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from "vue"
+import { computed, ref } from "vue"
-import { ShortcutDef, getShortcuts } from "~/helpers/shortcuts"
+import Fuse from "fuse.js"
-import MiniSearch from "minisearch"
+import mappings from "~/helpers/shortcuts"
 import { useI18n } from "@composables/i18n"
-import { groupBy, isEmpty } from "lodash-es"
 
 const t = useI18n()
 
@@ -61,33 +91,15 @@ defineProps<{
   show: boolean
 }>()
 
-const minisearch = new MiniSearch({
+const options = {
-  fields: ["label", "keys", "section"],
+  keys: ["shortcuts.label"],
-  idField: "label",
+}
-  storeFields: ["label", "keys", "section"],
-  searchOptions: {
-    fuzzy: true,
-    prefix: true,
-  },
-})
 
-const shortcuts = getShortcuts(t)
+const fuse = new Fuse(mappings, options)
-
-onBeforeMount(() => {
-  minisearch.addAllAsync(shortcuts)
-})
 
 const filterText = ref("")
 
-const shortcutsResults = computed(() => {
+const searchResults = computed(() => fuse.search(filterText.value))
-  // If there are no search text, return all the shortcuts
-  const results =
-    filterText.value.length > 0
-      ? minisearch.search(filterText.value)
-      : shortcuts
-
-  return groupBy(results, "section") as Record<string, ShortcutDef[]>
-})
 
 const emit = defineEmits<{
   (e: "close"): void

packages/hoppscotch-common/src/components/app/ShortcutsEntry.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center py-1">
     <span class="flex flex-1 mr-4">
-      {{ shortcut.label }}
+      {{ t(shortcut.label) }}
     </span>
     <kbd
       v-for="(key, index) in shortcut.keys"
@@ -14,9 +14,14 @@
 </template>
 
 <script setup lang="ts">
-import { ShortcutDef } from "~/helpers/shortcuts"
+import { useI18n } from "@composables/i18n"
+
+const t = useI18n()
 
 defineProps<{
-  shortcut: ShortcutDef
+  shortcut: {
+    label: string
+    keys: string[]
+  }
 }>()
 </script>

packages/hoppscotch-common/src/components/app/spotlight/Entry.vue

@@ -1,122 +0,0 @@
-<template>
-  <button
-    ref="el"
-    class="flex items-center flex-1 px-6 py-4 font-medium space-x-4 transition cursor-pointer relative search-entry focus:outline-none"
-    :class="{ 'active bg-primaryLight text-secondaryDark': active }"
-    tabindex="-1"
-    @click="emit('action')"
-    @keydown.enter="emit('action')"
-  >
-    <component
-      :is="entry.icon"
-      class="opacity-50 svg-icons"
-      :class="{ 'opacity-100': active }"
-    />
-    <template
-      v-if="entry.text.type === 'text' && typeof entry.text.text === 'string'"
-    >
-      <span class="block truncate">
-        {{ entry.text.text }}
-      </span>
-    </template>
-    <template
-      v-else-if="entry.text.type === 'text' && Array.isArray(entry.text.text)"
-    >
-      <template
-        v-for="(labelPart, labelPartIndex) in entry.text.text"
-        :key="`label-${labelPart}-${labelPartIndex}`"
-      >
-        <span class="block truncate">
-          {{ labelPart }}
-        </span>
-        <icon-lucide-chevron-right
-          v-if="labelPartIndex < entry.text.text.length - 1"
-          class="flex flex-shrink-0"
-        />
-      </template>
-    </template>
-    <template v-else-if="entry.text.type === 'custom'">
-      <span class="block truncate">
-        <component
-          :is="entry.text.component"
-          v-bind="entry.text.componentProps"
-        />
-      </span>
-    </template>
-    <span v-if="formattedShortcutKeys" class="block truncate">
-      <kbd
-        v-for="(key, keyIndex) in formattedShortcutKeys"
-        :key="`key-${String(keyIndex)}`"
-        class="shortcut-key"
-      >
-        {{ key }}
-      </kbd>
-    </span>
-  </button>
-</template>
-
-<script lang="ts">
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
-import { SpotlightSearcherResult } from "~/services/spotlight"
-
-const SPECIAL_KEY_CHARS: Record<string, string> = {
-  ctrl: getPlatformSpecialKey(),
-  alt: getPlatformAlternateKey(),
-  up: "↑",
-  down: "↓",
-  enter: "↩",
-}
-</script>
-
-<script setup lang="ts">
-import { computed, watch, ref } from "vue"
-import { capitalize } from "lodash-es"
-import { getPlatformAlternateKey } from "~/helpers/platformutils"
-
-const el = ref<HTMLElement>()
-
-const props = defineProps<{
-  entry: SpotlightSearcherResult
-  active: boolean
-}>()
-
-const formattedShortcutKeys = computed(() =>
-  props.entry.meta?.keyboardShortcut?.map((key) => {
-    return SPECIAL_KEY_CHARS[key] ?? capitalize(key)
-  })
-)
-
-const emit = defineEmits<{
-  (e: "action"): void
-}>()
-
-watch(
-  () => props.active,
-  (active) => {
-    if (active) {
-      el.value?.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "nearest",
-      })
-    }
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-.search-entry {
-  @apply after:absolute;
-  @apply after:top-0;
-  @apply after:left-0;
-  @apply after:bottom-0;
-  @apply after:bg-transparent;
-  @apply after:z-2;
-  @apply after:w-0.5;
-  @apply after:content-DEFAULT;
-
-  &.active {
-    @apply after:bg-accentLight;
-  }
-}
-</style>

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

@@ -1,30 +0,0 @@
-<template>
-  <span class="flex flex-1 items-center space-x-2">
-    <span class="block truncate">
-      {{ dateTimeText }}
-    </span>
-    <icon-lucide-chevron-right class="flex flex-shrink-0" />
-    <span class="block truncate">
-      {{ historyEntry.request.url }}
-    </span>
-    <span
-      class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
-    >
-      {{ historyEntry.request.query.split("\n")[0] }}
-    </span>
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue"
-import { shortDateTime } from "~/helpers/utils/date"
-import { GQLHistoryEntry } from "~/newstore/history"
-
-const props = defineProps<{
-  historyEntry: GQLHistoryEntry
-}>()
-
-const dateTimeText = computed(() =>
-  shortDateTime(props.historyEntry.updatedOn!)
-)
-</script>

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

@@ -1,43 +0,0 @@
-<template>
-  <span class="flex flex-1 items-center space-x-2">
-    <span class="block truncate">
-      {{ dateTimeText }}
-    </span>
-    <icon-lucide-chevron-right class="flex flex-shrink-0" />
-    <span
-      class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
-      :class="entryStatus.className"
-    >
-      {{ historyEntry.request.method }}
-    </span>
-    <span class="block truncate">
-      {{ historyEntry.request.endpoint }}
-    </span>
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue"
-import findStatusGroup from "~/helpers/findStatusGroup"
-import { shortDateTime } from "~/helpers/utils/date"
-import { RESTHistoryEntry } from "~/newstore/history"
-
-const props = defineProps<{
-  historyEntry: RESTHistoryEntry
-}>()
-
-const dateTimeText = computed(() =>
-  shortDateTime(props.historyEntry.updatedOn!)
-)
-
-const entryStatus = computed(() => {
-  const foundStatusGroup = findStatusGroup(
-    props.historyEntry.responseMeta.statusCode
-  )
-  return (
-    foundStatusGroup || {
-      className: "",
-    }
-  )
-})
-</script>

packages/hoppscotch-common/src/components/app/spotlight/index.vue

@@ -1,238 +0,0 @@
-<template>
-  <HoppSmartModal
-    v-if="show"
-    styles="sm:max-w-lg"
-    full-width
-    @close="emit('hide-modal')"
-  >
-    <template #body>
-      <div class="flex flex-col border-b transition border-divider">
-        <div class="flex items-center">
-          <input
-            id="command"
-            v-model="search"
-            v-focus
-            type="text"
-            autocomplete="off"
-            name="command"
-            :placeholder="`${t('app.type_a_command_search')}`"
-            class="flex flex-1 text-base bg-transparent text-secondaryDark px-6 py-5"
-          />
-          <HoppSmartSpinner v-if="searchSession?.loading" class="mr-6" />
-        </div>
-      </div>
-      <div
-        v-if="searchSession && search.length > 0"
-        class="flex flex-col flex-1 overflow-y-auto border-b border-divider divide-y divide-dividerLight"
-      >
-        <div
-          v-for="([sectionID, sectionResult], sectionIndex) in scoredResults"
-          :key="`section-${sectionID}`"
-          class="flex flex-col"
-        >
-          <h5
-            class="px-6 py-2 bg-primaryContrast z-10 text-secondaryLight sticky top-0"
-          >
-            {{ sectionResult.title }}
-          </h5>
-          <AppSpotlightEntry
-            v-for="(result, entryIndex) in sectionResult.results"
-            :key="`result-${result.id}`"
-            :entry="result"
-            :active="isEqual(selectedEntry, [sectionIndex, entryIndex])"
-            @mouseover="selectedEntry = [sectionIndex, entryIndex]"
-            @action="runAction(sectionID, result)"
-          />
-        </div>
-        <HoppSmartPlaceholder
-          v-if="search.length > 0 && scoredResults.length === 0"
-          :text="`${t('state.nothing_found')} ‟${search}”`"
-        >
-          <template #icon>
-            <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
-          </template>
-          <HoppButtonSecondary
-            :label="t('action.clear')"
-            outline
-            @click="search = ''"
-          />
-        </HoppSmartPlaceholder>
-      </div>
-      <div
-        class="flex flex-shrink-0 text-tiny text-secondaryLight p-4 justify-between whitespace-nowrap overflow-auto <sm:hidden"
-      >
-        <div class="flex items-center">
-          <kbd class="shortcut-key">↑</kbd>
-          <kbd class="shortcut-key">↓</kbd>
-          <span class="mx-2 truncate">
-            {{ t("action.to_navigate") }}
-          </span>
-          <kbd class="shortcut-key">↩</kbd>
-          <span class="ml-2 truncate">
-            {{ t("action.to_select") }}
-          </span>
-        </div>
-        <div class="flex items-center">
-          <kbd class="shortcut-key">ESC</kbd>
-          <span class="ml-2 truncate">
-            {{ t("action.to_close") }}
-          </span>
-        </div>
-      </div>
-    </template>
-  </HoppSmartModal>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from "vue"
-import { useService } from "dioc/vue"
-import { useI18n } from "@composables/i18n"
-import {
-  SpotlightService,
-  SpotlightSearchState,
-  SpotlightSearcherResult,
-} from "~/services/spotlight"
-import { isEqual } from "lodash-es"
-import { HistorySpotlightSearcherService } from "~/services/spotlight/searchers/history.searcher"
-import { UserSpotlightSearcherService } from "~/services/spotlight/searchers/user.searcher"
-
-const t = useI18n()
-
-const props = defineProps<{
-  show: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: "hide-modal"): void
-}>()
-
-const spotlightService = useService(SpotlightService)
-
-useService(HistorySpotlightSearcherService)
-useService(UserSpotlightSearcherService)
-
-const search = ref("")
-
-const searchSession = ref<SpotlightSearchState>()
-const stopSearchSession = ref<() => void>()
-
-const scoredResults = computed(() =>
-  Object.entries(searchSession.value?.results ?? {}).sort(
-    ([, sectionA], [, sectionB]) => sectionB.avgScore - sectionA.avgScore
-  )
-)
-
-const { selectedEntry } = newUseArrowKeysForNavigation()
-
-watch(
-  () => props.show,
-  (show) => {
-    search.value = ""
-
-    if (show) {
-      const [session, onSessionEnd] =
-        spotlightService.createSearchSession(search)
-
-      searchSession.value = session.value
-      stopSearchSession.value = onSessionEnd
-    } else {
-      stopSearchSession.value?.()
-      stopSearchSession.value = undefined
-      searchSession.value = undefined
-    }
-  }
-)
-
-function runAction(searcherID: string, result: SpotlightSearcherResult) {
-  spotlightService.selectSearchResult(searcherID, result)
-  emit("hide-modal")
-}
-
-function newUseArrowKeysForNavigation() {
-  const selectedEntry = ref<[number, number]>([0, 0]) // [sectionIndex, entryIndex]
-
-  watch(search, () => {
-    selectedEntry.value = [0, 0]
-  })
-
-  const onArrowDown = () => {
-    // If no entries, do nothing
-    if (scoredResults.value.length === 0) return
-
-    const [sectionIndex, entryIndex] = selectedEntry.value
-
-    const [, section] = scoredResults.value[sectionIndex]
-
-    if (entryIndex < section.results.length - 1) {
-      selectedEntry.value = [sectionIndex, entryIndex + 1]
-    } else if (sectionIndex < scoredResults.value.length - 1) {
-      selectedEntry.value = [sectionIndex + 1, 0]
-    } else {
-      selectedEntry.value = [0, 0]
-    }
-  }
-
-  const onArrowUp = () => {
-    // If no entries, do nothing
-    if (scoredResults.value.length === 0) return
-
-    const [sectionIndex, entryIndex] = selectedEntry.value
-
-    if (entryIndex > 0) {
-      selectedEntry.value = [sectionIndex, entryIndex - 1]
-    } else if (sectionIndex > 0) {
-      const [, section] = scoredResults.value[sectionIndex - 1]
-      selectedEntry.value = [sectionIndex - 1, section.results.length - 1]
-    } else {
-      selectedEntry.value = [
-        scoredResults.value.length - 1,
-        scoredResults.value[scoredResults.value.length - 1][1].results.length -
-          1,
-      ]
-    }
-  }
-
-  const onEnter = () => {
-    // If no entries, do nothing
-    if (scoredResults.value.length === 0) return
-
-    const [sectionIndex, entryIndex] = selectedEntry.value
-    const [sectionID, section] = scoredResults.value[sectionIndex]
-    const result = section.results[entryIndex]
-
-    runAction(sectionID, result)
-  }
-
-  function handleKeyPress(e: KeyboardEvent) {
-    if (e.key === "ArrowUp") {
-      e.preventDefault()
-      e.stopPropagation()
-
-      onArrowUp()
-    } else if (e.key === "ArrowDown") {
-      e.preventDefault()
-      e.stopPropagation()
-
-      onArrowDown()
-    } else if (e.key === "Enter") {
-      e.preventDefault()
-      e.stopPropagation()
-
-      onEnter()
-    }
-  }
-
-  watch(
-    () => props.show,
-    (show) => {
-      if (show) {
-        window.addEventListener("keydown", handleKeyPress)
-      } else {
-        window.removeEventListener("keydown", handleKeyPress)
-      }
-    }
-  )
-
-  return { selectedEntry }
-}
-</script>

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

@@ -284,14 +284,6 @@ const importerAction = async (stepResults: StepReturnValue[]) => {
           emit("import-to-teams", result)
         } else {
           appendRESTCollections(result)
-
-          platform.analytics?.logEvent({
-            type: "HOPP_IMPORT_COLLECTION",
-            importer: importerModule.value!.name,
-            platform: "rest",
-            workspaceType: "personal",
-          })
-
           fileImported()
         }
       }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col flex-1">
+  <div class="flex flex-col flex-1 bg-primary">
     <div
       class="sticky z-10 flex justify-between flex-1 border-b bg-primary border-dividerLight"
       :style="
@@ -243,33 +243,49 @@
           />
         </template>
         <template #emptyNode="{ node }">
-          <HoppSmartPlaceholder
+          <div
             v-if="filterText.length !== 0 && filteredCollections.length === 0"
-            :text="`${t('state.nothing_found')} ‟${filterText}”`"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
           >
-            <template #icon>
             <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
-            </template>
+            <span class="my-2 text-center">
-          </HoppSmartPlaceholder>
+              {{ t("state.nothing_found") }} "{{ filterText }}"
-          <HoppSmartPlaceholder
+            </span>
-            v-else-if="node === null"
+          </div>
-            :src="`/images/states/${colorMode.value}/pack.svg`"
+          <div v-else-if="node === null">
-            :alt="`${t('empty.collections')}`"
+            <div
-            :text="t('empty.collections')"
+              class="flex flex-col items-center justify-center p-4 text-secondaryLight"
             >
+              <img
+                :src="`/images/states/${colorMode.value}/pack.svg`"
+                loading="lazy"
+                class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
+                :alt="`${t('empty.collections')}`"
+              />
+              <span class="pb-4 text-center">
+                {{ t("empty.collections") }}
+              </span>
               <HoppButtonSecondary
                 :label="t('add.new')"
                 filled
                 outline
                 @click="emit('display-modal-add')"
               />
-          </HoppSmartPlaceholder>
+            </div>
-          <HoppSmartPlaceholder
+          </div>
+          <div
             v-else-if="node.data.type === 'collections'"
-            :src="`/images/states/${colorMode.value}/pack.svg`"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-            :alt="`${t('empty.collections')}`"
-            :text="t('empty.collections')"
           >
+            <img
+              :src="`/images/states/${colorMode.value}/pack.svg`"
+              loading="lazy"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
+              :alt="`${t('empty.collection')}`"
+            />
+            <span class="pb-4 text-center">
+              {{ t("empty.collection") }}
+            </span>
             <HoppButtonSecondary
               :label="t('add.new')"
               filled
@@ -282,14 +298,21 @@
                   })
               "
             />
-          </HoppSmartPlaceholder>
+          </div>
-          <HoppSmartPlaceholder
+          <div
             v-else-if="node.data.type === 'folders'"
-            :src="`/images/states/${colorMode.value}/pack.svg`"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-            :alt="`${t('empty.folder')}`"
-            :text="t('empty.folder')"
           >
-          </HoppSmartPlaceholder>
+            <img
+              :src="`/images/states/${colorMode.value}/pack.svg`"
+              loading="lazy"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
+              :alt="`${t('empty.folder')}`"
+            />
+            <span class="text-center">
+              {{ t("empty.folder") }}
+            </span>
+          </div>
         </template>
       </SmartTree>
     </div>

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

@@ -89,7 +89,6 @@ import {
 import { GQLError } from "~/helpers/backend/GQLClient"
 import { computedWithControl } from "@vueuse/core"
 import { currentActiveTab } from "~/helpers/rest/tab"
-import { platform } from "~/platform"
 
 const t = useI18n()
 const toast = useToast()
@@ -224,13 +223,6 @@ const saveRequestAs = async () => {
       },
     }
 
-    platform.analytics?.logEvent({
-      type: "HOPP_SAVE_REQUEST",
-      createdNow: true,
-      platform: "rest",
-      workspaceType: "personal",
-    })
-
     requestSaved()
   } else if (picked.value.pickedType === "my-folder") {
     if (!isHoppRESTRequest(requestUpdated))
@@ -251,13 +243,6 @@ const saveRequestAs = async () => {
       },
     }
 
-    platform.analytics?.logEvent({
-      type: "HOPP_SAVE_REQUEST",
-      createdNow: true,
-      platform: "rest",
-      workspaceType: "personal",
-    })
-
     requestSaved()
   } else if (picked.value.pickedType === "my-request") {
     if (!isHoppRESTRequest(requestUpdated))
@@ -279,38 +264,17 @@ const saveRequestAs = async () => {
       },
     }
 
-    platform.analytics?.logEvent({
-      type: "HOPP_SAVE_REQUEST",
-      createdNow: false,
-      platform: "rest",
-      workspaceType: "personal",
-    })
-
     requestSaved()
   } else if (picked.value.pickedType === "teams-collection") {
     if (!isHoppRESTRequest(requestUpdated))
       throw new Error("requestUpdated is not a REST Request")
 
     updateTeamCollectionOrFolder(picked.value.collectionID, requestUpdated)
-
-    platform.analytics?.logEvent({
-      type: "HOPP_SAVE_REQUEST",
-      createdNow: true,
-      platform: "rest",
-      workspaceType: "team",
-    })
   } else if (picked.value.pickedType === "teams-folder") {
     if (!isHoppRESTRequest(requestUpdated))
       throw new Error("requestUpdated is not a REST Request")
 
     updateTeamCollectionOrFolder(picked.value.folderID, requestUpdated)
-
-    platform.analytics?.logEvent({
-      type: "HOPP_SAVE_REQUEST",
-      createdNow: true,
-      platform: "rest",
-      workspaceType: "team",
-    })
   } else if (picked.value.pickedType === "teams-request") {
     if (!isHoppRESTRequest(requestUpdated))
       throw new Error("requestUpdated is not a REST Request")
@@ -328,13 +292,6 @@ const saveRequestAs = async () => {
       title: requestUpdated.name,
     }
 
-    platform.analytics?.logEvent({
-      type: "HOPP_SAVE_REQUEST",
-      createdNow: false,
-      platform: "rest",
-      workspaceType: "team",
-    })
-
     pipe(
       updateTeamRequest(picked.value.requestID, data),
       TE.match(
@@ -356,13 +313,6 @@ const saveRequestAs = async () => {
       requestUpdated as HoppGQLRequest
     )
 
-    platform.analytics?.logEvent({
-      type: "HOPP_SAVE_REQUEST",
-      createdNow: false,
-      platform: "gql",
-      workspaceType: "team",
-    })
-
     requestSaved()
   } else if (picked.value.pickedType === "gql-my-folder") {
     // TODO: Check for GQL request ?
@@ -371,13 +321,6 @@ const saveRequestAs = async () => {
       requestUpdated as HoppGQLRequest
     )
 
-    platform.analytics?.logEvent({
-      type: "HOPP_SAVE_REQUEST",
-      createdNow: true,
-      platform: "gql",
-      workspaceType: "team",
-    })
-
     requestSaved()
   } else if (picked.value.pickedType === "gql-my-collection") {
     // TODO: Check for GQL request ?
@@ -386,13 +329,6 @@ const saveRequestAs = async () => {
       requestUpdated as HoppGQLRequest
     )
 
-    platform.analytics?.logEvent({
-      type: "HOPP_SAVE_REQUEST",
-      createdNow: true,
-      platform: "gql",
-      workspaceType: "team",
-    })
-
     requestSaved()
   }
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col flex-1">
+  <div class="flex flex-col flex-1 bg-primary">
     <div
       class="sticky z-10 flex justify-between flex-1 border-b bg-primary border-dividerLight"
       :style="
@@ -262,12 +262,19 @@
         </template>
         <template #emptyNode="{ node }">
           <div v-if="node === null">
-            <div @drop="(e) => e.stopPropagation()">
+            <div
-              <HoppSmartPlaceholder
+              class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-                :src="`/images/states/${colorMode.value}/pack.svg`"
+              @drop="(e) => e.stopPropagation()"
-                :alt="`${t('empty.collections')}`"
-                :text="t('empty.collections')"
             >
+              <img
+                :src="`/images/states/${colorMode.value}/pack.svg`"
+                loading="lazy"
+                class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
+                :alt="`${t('empty.collection')}`"
+              />
+              <span class="pb-4 text-center">
+                {{ t("empty.collections") }}
+              </span>
               <HoppButtonSecondary
                 v-if="hasNoTeamAccess"
                 v-tippy="{ theme: 'tooltip' }"
@@ -285,30 +292,37 @@
                 outline
                 @click="emit('display-modal-add')"
               />
-              </HoppSmartPlaceholder>
             </div>
           </div>
           <div
             v-else-if="node.data.type === 'collections'"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
             @drop="(e) => e.stopPropagation()"
           >
-            <HoppSmartPlaceholder
+            <img
               :src="`/images/states/${colorMode.value}/pack.svg`"
-              :alt="`${t('empty.collections')}`"
+              loading="lazy"
-              :text="t('empty.collections')"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
-            >
+              :alt="`${t('empty.collection')}`"
-            </HoppSmartPlaceholder>
+            />
+            <span class="pb-4 text-center">
+              {{ t("empty.collections") }}
+            </span>
           </div>
           <div
             v-else-if="node.data.type === 'folders'"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
             @drop="(e) => e.stopPropagation()"
           >
-            <HoppSmartPlaceholder
+            <img
               :src="`/images/states/${colorMode.value}/pack.svg`"
+              loading="lazy"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
               :alt="`${t('empty.folder')}`"
-              :text="t('empty.folder')"
+            />
-            >
+            <span class="text-center">
-            </HoppSmartPlaceholder>
+              {{ t("empty.folder") }}
+            </span>
           </div>
         </template>
       </SmartTree>

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

@@ -46,7 +46,6 @@ import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
 import { HoppGQLRequest, makeCollection } from "@hoppscotch/data"
 import { addGraphqlCollection } from "~/newstore/collections"
-import { platform } from "~/platform"
 
 export default defineComponent({
   props: {
@@ -80,13 +79,6 @@ export default defineComponent({
       )
 
       this.hideModal()
-
-      platform.analytics?.logEvent({
-        type: "HOPP_CREATE_COLLECTION",
-        isRootCollection: true,
-        platform: "gql",
-        workspaceType: "personal",
-      })
     },
     hideModal() {
       this.name = null

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

@@ -171,14 +171,21 @@
           @duplicate-request="$emit('duplicate-request', $event)"
           @select="$emit('select', $event)"
         />
-        <HoppSmartPlaceholder
+        <div
           v-if="
             collection.folders.length === 0 && collection.requests.length === 0
           "
-          :src="`/images/states/${colorMode.value}/pack.svg`"
+          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-          :alt="`${t('empty.collection')}`"
-          :text="t('empty.collection')"
         >
+          <img
+            :src="`/images/states/${colorMode.value}/pack.svg`"
+            loading="lazy"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
+            :alt="`${t('empty.collection')}`"
+          />
+          <span class="pb-4 text-center">
+            {{ t("empty.collection") }}
+          </span>
           <HoppButtonSecondary
             :label="t('add.new')"
             filled
@@ -189,7 +196,7 @@
               })
             "
           />
-        </HoppSmartPlaceholder>
+        </div>
       </div>
     </div>
     <HoppSmartConfirmModal

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

@@ -160,19 +160,25 @@
           @duplicate-request="emit('duplicate-request', $event)"
           @select="emit('select', $event)"
         />
-
+        <div
-        <HoppSmartPlaceholder
           v-if="
             folder.folders &&
             folder.folders.length === 0 &&
             folder.requests &&
             folder.requests.length === 0
           "
-          :src="`/images/states/${colorMode.value}/pack.svg`"
+          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-          :alt="`${t('empty.folder')}`"
-          :text="t('empty.folder')"
         >
-        </HoppSmartPlaceholder>
+          <img
+            :src="`/images/states/${colorMode.value}/pack.svg`"
+            loading="lazy"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
+            :alt="`${t('empty.folder')}`"
+          />
+          <span class="text-center">
+            {{ t("empty.folder") }}
+          </span>
+        </div>
       </div>
     </div>
     <HoppSmartConfirmModal

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

@@ -244,14 +244,6 @@ const importFromJSON = () => {
       return
     }
     appendGraphqlCollections(collections)
-
-    platform.analytics?.logEvent({
-      type: "HOPP_IMPORT_COLLECTION",
-      importer: "json",
-      workspaceType: "personal",
-      platform: "gql",
-    })
-
     fileImported()
   }
   reader.readAsText(inputChooseFileToImportFrom.value.files[0])
@@ -265,12 +257,6 @@ const exportJSON = () => {
   const url = URL.createObjectURL(file)
   a.href = url
 
-  platform?.analytics?.logEvent({
-    type: "HOPP_EXPORT_COLLECTION",
-    exporter: "json",
-    platform: "gql",
-  })
-
   // TODO: get uri from meta
   a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}.json`
   document.body.appendChild(a)

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

@@ -60,27 +60,35 @@
         @select="$emit('select', $event)"
       />
     </div>
-    <HoppSmartPlaceholder
+    <div
       v-if="collections.length === 0"
-      :src="`/images/states/${colorMode.value}/pack.svg`"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-      :alt="`${t('empty.collections')}`"
-      :text="t('empty.collections')"
     >
+      <img
+        :src="`/images/states/${colorMode.value}/pack.svg`"
+        loading="lazy"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+        :alt="t('empty.collections')"
+      />
+      <span class="pb-4 text-center">
+        {{ t("empty.collections") }}
+      </span>
       <HoppButtonSecondary
         :label="t('add.new')"
         filled
         outline
         @click="displayModalAdd(true)"
       />
-    </HoppSmartPlaceholder>
+    </div>
-    <HoppSmartPlaceholder
+    <div
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
-      :text="`${t('state.nothing_found')} ‟${filterText}”`"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
-      <template #icon>
       <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
-      </template>
+      <span class="my-2 text-center">
-    </HoppSmartPlaceholder>
+        {{ t("state.nothing_found") }} "{{ filterText }}"
+      </span>
+    </div>
     <CollectionsGraphqlAdd
       :show="showModalAdd"
       @hide-modal="displayModalAdd(false)"
@@ -145,7 +153,6 @@ import IconArchive from "~icons/lucide/archive"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { useColorMode } from "@composables/theming"
-import { platform } from "~/platform"
 
 export default defineComponent({
   props: {
@@ -278,13 +285,6 @@ export default defineComponent({
         response: "",
       })
 
-      platform.analytics?.logEvent({
-        type: "HOPP_SAVE_REQUEST",
-        platform: "gql",
-        createdNow: true,
-        workspaceType: "personal",
-      })
-
       this.displayModalAddRequest(false)
     },
     addRequest(payload) {
@@ -294,14 +294,6 @@ export default defineComponent({
     },
     onAddFolder({ name, path }) {
       addGraphqlFolder(name, path)
-
-      platform.analytics?.logEvent({
-        type: "HOPP_CREATE_COLLECTION",
-        isRootCollection: false,
-        platform: "gql",
-        workspaceType: "personal",
-      })
-
       this.displayModalAddFolder(false)
     },
     addFolder(payload) {

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

@@ -125,8 +125,8 @@
       @hide-modal="displayModalEditFolder(false)"
     />
     <CollectionsEditRequest
-      v-model="editingRequestName"
       :show="showModalEditRequest"
+      :model-value="editingRequest ? editingRequest.name : ''"
       :loading-state="modalLoadingState"
       @submit="updateEditingRequest"
       @hide-modal="displayModalEditRequest(false)"
@@ -157,7 +157,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, PropType, ref, watch } from "vue"
+import { computed, PropType, ref, watch } from "vue"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
 import { Picked } from "~/helpers/types/HoppPicked"
@@ -288,7 +288,6 @@ const editingFolder = ref<
 const editingFolderName = ref<string | null>(null)
 const editingFolderPath = ref<string | null>(null)
 const editingRequest = ref<HoppRESTRequest | null>(null)
-const editingRequestName = ref("")
 const editingRequestIndex = ref<number | null>(null)
 const editingRequestID = ref<string | null>(null)
 
@@ -599,25 +598,11 @@ const addNewRootCollection = (name: string) => {
       })
     )
 
-    platform.analytics?.logEvent({
-      type: "HOPP_CREATE_COLLECTION",
-      platform: "rest",
-      workspaceType: "personal",
-      isRootCollection: true,
-    })
-
     displayModalAdd(false)
   } else if (hasTeamWriteAccess.value) {
     if (!collectionsType.value.selectedTeam) return
     modalLoadingState.value = true
 
-    platform.analytics?.logEvent({
-      type: "HOPP_CREATE_COLLECTION",
-      platform: "rest",
-      workspaceType: "team",
-      isRootCollection: true,
-    })
-
     pipe(
       createNewRootCollection(name, collectionsType.value.selectedTeam.id),
       TE.match(
@@ -666,13 +651,6 @@ const onAddRequest = (requestName: string) => {
       },
     })
 
-    platform.analytics?.logEvent({
-      type: "HOPP_SAVE_REQUEST",
-      workspaceType: "personal",
-      createdNow: true,
-      platform: "rest",
-    })
-
     displayModalAddRequest(false)
   } else if (hasTeamWriteAccess.value) {
     const folder = editingFolder.value
@@ -688,13 +666,6 @@ const onAddRequest = (requestName: string) => {
       title: requestName,
     }
 
-    platform.analytics?.logEvent({
-      type: "HOPP_SAVE_REQUEST",
-      workspaceType: "team",
-      platform: "rest",
-      createdNow: true,
-    })
-
     pipe(
       createRequestInCollection(folder.id, data),
       TE.match(
@@ -740,14 +711,6 @@ const onAddFolder = (folderName: string) => {
   if (collectionsType.value.type === "my-collections") {
     if (!path) return
     addRESTFolder(folderName, path)
-
-    platform.analytics?.logEvent({
-      type: "HOPP_CREATE_COLLECTION",
-      workspaceType: "personal",
-      isRootCollection: false,
-      platform: "rest",
-    })
-
     displayModalAddFolder(false)
   } else if (hasTeamWriteAccess.value) {
     const folder = editingFolder.value
@@ -755,13 +718,6 @@ const onAddFolder = (folderName: string) => {
 
     modalLoadingState.value = true
 
-    platform.analytics?.logEvent({
-      type: "HOPP_CREATE_COLLECTION",
-      workspaceType: "personal",
-      isRootCollection: false,
-      platform: "rest",
-    })
-
     pipe(
       createChildCollection(folderName, folder.id),
       TE.match(
@@ -904,7 +860,6 @@ const editRequest = (payload: {
 }) => {
   const { folderPath, requestIndex, request } = payload
   editingRequest.value = request
-  editingRequestName.value = request.name ?? ""
   if (collectionsType.value.type === "my-collections" && folderPath) {
     editingFolderPath.value = folderPath
     editingRequestIndex.value = parseInt(requestIndex)
@@ -938,9 +893,6 @@ const updateEditingRequest = (newName: string) => {
 
     if (possibleActiveTab) {
       possibleActiveTab.value.document.request.name = requestUpdated.name
-      nextTick(() => {
-        possibleActiveTab.value.document.isDirty = false
-      })
     }
 
     displayModalEditRequest(false)
@@ -979,9 +931,6 @@ const updateEditingRequest = (newName: string) => {
 
     if (possibleTab) {
       possibleTab.value.document.request.name = requestName
-      nextTick(() => {
-        possibleTab.value.document.isDirty = false
-      })
     }
   }
 }
@@ -1927,12 +1876,6 @@ const exportData = async (
 }
 
 const exportJSONCollection = async () => {
-  platform.analytics?.logEvent({
-    type: "HOPP_EXPORT_COLLECTION",
-    exporter: "json",
-    platform: "rest",
-  })
-
   await getJSONCollection()
 
   initializeDownloadCollection(collectionJSON.value, null)
@@ -1944,12 +1887,6 @@ const createCollectionGist = async () => {
     return
   }
 
-  platform.analytics?.logEvent({
-    type: "HOPP_EXPORT_COLLECTION",
-    exporter: "gist",
-    platform: "rest",
-  })
-
   creatingGistCollection.value = true
   await getJSONCollection()
 
@@ -1980,12 +1917,6 @@ const importToTeams = async (collection: HoppCollection<HoppRESTRequest>[]) => {
 
   importingMyCollections.value = true
 
-  platform.analytics?.logEvent({
-    type: "HOPP_EXPORT_COLLECTION",
-    exporter: "import-to-teams",
-    platform: "rest",
-  })
-
   pipe(
     importJSONToTeam(
       JSON.stringify(collection),

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

@@ -190,12 +190,6 @@ const createEnvironmentGist = async () => {
     )
 
     toast.success(t("export.gist_created").toString())
-
-    platform.analytics?.logEvent({
-      type: "HOPP_EXPORT_ENVIRONMENT",
-      platform: "rest",
-    })
-
     window.open(res.data.html_url)
   } catch (e) {
     toast.error(t("error.something_went_wrong").toString())
@@ -255,13 +249,6 @@ const openDialogChooseFileToImportFrom = () => {
 
 const importToTeams = async (content: Environment[]) => {
   loading.value = true
-
-  platform.analytics?.logEvent({
-    type: "HOPP_IMPORT_ENVIRONMENT",
-    platform: "rest",
-    workspaceType: "team",
-  })
-
   for (const [i, env] of content.entries()) {
     if (i === content.length - 1) {
       await pipe(
@@ -314,12 +301,6 @@ const importFromJSON = () => {
     return
   }
 
-  platform.analytics?.logEvent({
-    type: "HOPP_IMPORT_ENVIRONMENT",
-    platform: "rest",
-    workspaceType: "personal",
-  })
-
   const reader = new FileReader()
 
   reader.onload = ({ target }) => {
@@ -371,7 +352,6 @@ const importFromPostman = ({
   const environment: Environment = { name, variables: [] }
   values.forEach(({ key, value }) => environment.variables.push({ key, value }))
   const environments = [environment]
-
   importFromHoppscotch(environments)
 }
 

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

@@ -70,13 +70,20 @@
                 }
               "
             />
-            <HoppSmartPlaceholder
+            <div
               v-if="myEnvironments.length === 0"
-              :src="`/images/states/${colorMode.value}/blockchain.svg`"
+              class="flex flex-col items-center justify-center text-secondaryLight"
-              :alt="`${t('empty.environments')}`"
-              :text="t('empty.environments')"
             >
-            </HoppSmartPlaceholder>
+              <img
+                :src="`/images/states/${colorMode.value}/blockchain.svg`"
+                loading="lazy"
+                class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
+                :alt="`${t('empty.environments')}`"
+              />
+              <span class="pb-2 text-center">
+                {{ t("empty.environments") }}
+              </span>
+            </div>
           </HoppSmartTab>
           <HoppSmartTab
             :id="'team-environments'"
@@ -112,14 +119,20 @@
                   }
                 "
               />
-
+              <div
-              <HoppSmartPlaceholder
                 v-if="teamEnvironmentList.length === 0"
-                :src="`/images/states/${colorMode.value}/blockchain.svg`"
+                class="flex flex-col items-center justify-center text-secondaryLight"
-                :alt="`${t('empty.environments')}`"
-                :text="t('empty.environments')"
               >
-              </HoppSmartPlaceholder>
+                <img
+                  :src="`/images/states/${colorMode.value}/blockchain.svg`"
+                  loading="lazy"
+                  class="inline-flex flex-col object-contain object-center w-16 h-16 mb-2"
+                  :alt="`${t('empty.environments')}`"
+                />
+                <span class="pb-2 text-center">
+                  {{ t("empty.environments") }}
+                </span>
+              </div>
             </div>
             <div
               v-if="!teamListLoading && teamAdapterError"

packages/hoppscotch-common/src/components/environments/my/Details.vue

@@ -79,19 +79,26 @@
               />
             </div>
           </div>
-          <HoppSmartPlaceholder
+          <div
             v-if="vars.length === 0"
-            :src="`/images/states/${colorMode.value}/blockchain.svg`"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-            :alt="`${t('empty.environments')}`"
-            :text="t('empty.environments')"
           >
+            <img
+              :src="`/images/states/${colorMode.value}/blockchain.svg`"
+              loading="lazy"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+              :alt="`${t('empty.environments')}`"
+            />
+            <span class="pb-4 text-center">
+              {{ t("empty.environments") }}
+            </span>
             <HoppButtonSecondary
               :label="`${t('add.new')}`"
               filled
               class="mb-4"
               @click="addEnvironmentVariable"
             />
-          </HoppSmartPlaceholder>
+          </div>
         </div>
       </div>
     </template>
@@ -141,7 +148,6 @@ import { useToast } from "@composables/toast"
 import { useReadonlyStream } from "@composables/stream"
 import { useColorMode } from "@composables/theming"
 import { environmentsStore } from "~/newstore/environments"
-import { platform } from "~/platform"
 
 type EnvironmentVariable = {
   id: number
@@ -305,11 +311,6 @@ const saveEnvironment = () => {
       index: envList.value.length - 1,
     })
     toast.success(`${t("environment.created")}`)
-
-    platform.analytics?.logEvent({
-      type: "HOPP_CREATE_ENVIRONMENT",
-      workspaceType: "personal",
-    })
   } else if (props.editingEnvironmentIndex === "Global") {
     // Editing the Global environment
     setGlobalEnvVariables(environmentUpdated.variables)

packages/hoppscotch-common/src/components/environments/my/index.vue

@@ -32,12 +32,19 @@
       :environment="environment"
       @edit-environment="editEnvironment(index)"
     />
-    <HoppSmartPlaceholder
+    <div
       v-if="environments.length === 0"
-      :src="`/images/states/${colorMode.value}/blockchain.svg`"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-      :alt="`${t('empty.environments')}`"
-      :text="t('empty.environments')"
     >
+      <img
+        :src="`/images/states/${colorMode.value}/blockchain.svg`"
+        loading="lazy"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+        :alt="`${t('empty.environments')}`"
+      />
+      <span class="pb-4 text-center">
+        {{ t("empty.environments") }}
+      </span>
       <HoppButtonSecondary
         :label="`${t('add.new')}`"
         filled
@@ -45,7 +52,7 @@
         class="mb-4"
         @click="displayModalAdd(true)"
       />
-    </HoppSmartPlaceholder>
+    </div>
     <EnvironmentsMyDetails
       :show="showModalDetails"
       :action="action"