chore: add empty result placeholder

.dockerignore

@@ -1,2 +0,0 @@
-node_modules
-**/*/node_modules

.env.example

@@ -13,7 +13,6 @@ SESSION_SECRET='add some secret here'
 # Hoppscotch App Domain Config
 REDIRECT_URL="http://localhost:3000"
 WHITELISTED_ORIGINS = "http://localhost:3170,http://localhost:3000,http://localhost:3100"
-VITE_ALLOWED_AUTH_PROVIDERS = GOOGLE,GITHUB,MICROSOFT,EMAIL
 
 # Google Auth Config
 GOOGLE_CLIENT_ID="************************************************"

.github/workflows/tests.yml

@@ -2,9 +2,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: [main, staging, "release/**"]
+    branches: [main, staging]
   pull_request:
-    branches: [main, staging, "release/**"]
+    branches: [main, staging]
 
 jobs:
   test:

.prettierrc.js

@@ -1,8 +1,3 @@
 module.exports = {
-  semi: false,
+  semi: false
-  trailingComma: "es5",
-  singleQuote: false,
-  printWidth: 80,
-  useTabs: false,
-  tabWidth: 2
 }

aio.Caddyfile

@@ -1,11 +0,0 @@
-:3000 {
-  try_files {path} /
-  root * /site/selfhost-web
-  file_server
-}
-
-:3100 {
-  try_files {path} /
-  root * /site/sh-admin
-  file_server
-}

aio_run.mjs

@@ -1,72 +0,0 @@
-#!/usr/local/bin/node
-// @ts-check
-
-import { execSync, spawn } from "child_process"
-import fs from "fs"
-import process from "process"
-
-function runChildProcessWithPrefix(command, args, prefix) {
-  const childProcess = spawn(command, args);
-
-  childProcess.stdout.on('data', (data) => {
-    const output = data.toString().trim().split('\n');
-    output.forEach((line) => {
-      console.log(`${prefix} | ${line}`);
-    });
-  });
-
-  childProcess.stderr.on('data', (data) => {
-    const error = data.toString().trim().split('\n');
-    error.forEach((line) => {
-      console.error(`${prefix} | ${line}`);
-    });
-  });
-
-  childProcess.on('close', (code) => {
-    console.log(`${prefix} Child process exited with code ${code}`);
-  });
-
-  childProcess.on('error', (stuff) => {
-    console.log("error")
-    console.log(stuff)
-  })
-
-  return childProcess
-}
-
-const envFileContent = Object.entries(process.env)
-  .filter(([env]) => env.startsWith("VITE_"))
-  .map(([env, val]) => `${env}=${
-    (val.startsWith("\"") && val.endsWith("\""))
-      ? val
-      : `"${val}"`
-  }`)
-  .join("\n")
-
-fs.writeFileSync("build.env", envFileContent)
-
-execSync(`npx import-meta-env -x build.env -e build.env -p "/site/**/*"`)
-
-fs.rmSync("build.env")
-
-const caddyProcess = runChildProcessWithPrefix("caddy", ["run", "--config", "/etc/caddy/Caddyfile", "--adapter", "caddyfile"], "App/Admin Dashboard Caddy")
-const backendProcess = runChildProcessWithPrefix("pnpm", ["run", "start:prod"], "Backend Server")
-
-caddyProcess.on("exit", (code) => {
-  console.log(`Exiting process because Caddy Server exited with code ${code}`)
-  process.exit(code)
-})
-
-backendProcess.on("exit", (code) => {
-  console.log(`Exiting process because Backend Server exited with code ${code}`)
-  process.exit(code)
-})
-
-process.on('SIGINT', () => {
-  console.log("SIGINT received, exiting...")
-
-  caddyProcess.kill("SIGINT")
-  backendProcess.kill("SIGINT")
-
-  process.exit(0)
-})

docker-compose.yml

@@ -8,25 +8,23 @@ services:
   hoppscotch-backend:
     container_name: hoppscotch-backend
     build:
-      dockerfile: prod.Dockerfile
+      dockerfile: packages/hoppscotch-backend/Dockerfile
       context: .
-      target: backend
+      target: prod
     env_file:
       - ./.env
     restart: always
     environment:
       # Edit the below line to match your PostgresDB URL if you have an outside DB (make sure to update the .env file as well)
       - DATABASE_URL=postgresql://postgres:testpass@hoppscotch-db:5432/hoppscotch?connect_timeout=300
-      - PORT=3170
+      - PORT=3000
     volumes:
-      # Uncomment the line below when modifying code. Only applicable when using the "dev" target.
+      - ./packages/hoppscotch-backend/:/usr/src/app
-      # - ./packages/hoppscotch-backend/:/usr/src/app
       - /usr/src/app/node_modules/
     depends_on:
-      hoppscotch-db:
+      - hoppscotch-db
-        condition: service_healthy
     ports:
-      - "3170:3170"
+      - "3170:3000"
 
   # The main hoppscotch app. This will be hosted at port 3000
   # NOTE: To do TLS or play around with how the app is hosted, you can look into the Caddyfile for
@@ -34,9 +32,8 @@ services:
   hoppscotch-app:
     container_name: hoppscotch-app
     build:
-      dockerfile: prod.Dockerfile
+      dockerfile: packages/hoppscotch-selfhost-web/Dockerfile
       context: .
-      target: app
     env_file:
       - ./.env
     depends_on:
@@ -50,9 +47,8 @@ services:
   hoppscotch-sh-admin:
     container_name: hoppscotch-sh-admin
     build:
-      dockerfile: prod.Dockerfile
+      dockerfile: packages/hoppscotch-sh-admin/Dockerfile
       context: .
-      target: sh_admin
     env_file:
       - ./.env
     depends_on:
@@ -60,91 +56,16 @@ services:
     ports:
       - "3100:8080"
 
-  # The service that spins up all 3 services at once in one container
-  hoppscotch-aio:
-    container_name: hoppscotch-aio
-    build:
-      dockerfile: prod.Dockerfile
-      context: .
-      target: aio
-    env_file:
-      - ./.env
-    depends_on:
-      hoppscotch-db:
-        condition: service_healthy
-    ports:
-      - "3000:3000"
-      - "3100:3100"
-      - "3170:3170"
-
   # The preset DB service, you can delete/comment the below lines if
   # you are using an external postgres instance
   # This will be exposed at port 5432
   hoppscotch-db:
-    image: postgres:15
+    image: postgres
     ports:
       - "5432:5432"
-    user: postgres
     environment:
-      # The default user defined by the docker image
-      POSTGRES_USER: postgres
       # NOTE: Please UPDATE THIS PASSWORD!
       POSTGRES_PASSWORD: testpass
       POSTGRES_DB: hoppscotch
-    healthcheck:
-      test:
-        [
-          "CMD-SHELL",
-          "sh -c 'pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}'"
-        ]
-      interval: 5s
-      timeout: 5s
-      retries: 10
 
-  # All the services listed below are deprececated
-  hoppscotch-old-backend:
-    container_name: hoppscotch-old-backend
-    build:
-      dockerfile: packages/hoppscotch-backend/Dockerfile
-      context: .
-      target: prod
-    env_file:
-      - ./.env
-    restart: always
-    environment:
-      # Edit the below line to match your PostgresDB URL if you have an outside DB (make sure to update the .env file as well)
-      - DATABASE_URL=postgresql://postgres:testpass@hoppscotch-db:5432/hoppscotch?connect_timeout=300
-      - PORT=3000
-    volumes:
-      # Uncomment the line below when modifying code. Only applicable when using the "dev" target.
-      # - ./packages/hoppscotch-backend/:/usr/src/app
-      - /usr/src/app/node_modules/
-    depends_on:
-      hoppscotch-db:
-        condition: service_healthy
-    ports:
-      - "3170:3000"
 
-  hoppscotch-old-app:
-    container_name: hoppscotch-old-app
-    build:
-      dockerfile: packages/hoppscotch-selfhost-web/Dockerfile
-      context: .
-    env_file:
-      - ./.env
-    depends_on:
-      - hoppscotch-old-backend
-    ports:
-      - "3000:8080"
-
-  hoppscotch-old-sh-admin:
-    container_name: hoppscotch-old-sh-admin
-    build:
-      dockerfile: packages/hoppscotch-sh-admin/Dockerfile
-      context: .
-    env_file:
-      - ./.env
-    depends_on:
-      - hoppscotch-old-backend
-    ports:
-      - "3100:8080"

healthcheck.sh

@@ -1,14 +0,0 @@
-#!/bin/bash
-
-curlCheck() {
-  if ! curl -s --head "$1" | head -n 1 | grep -q "HTTP/1.[01] [23].."; then
-    echo "URL request failed!"
-    exit 1
-  else
-    echo "URL request succeeded!"
-  fi
-}
-
-curlCheck "http://localhost:3000"
-curlCheck "http://localhost:3100"
-curlCheck "http://localhost:3170/ping"

packages/codemirror-lang-graphql/package.json

@@ -17,12 +17,12 @@
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@codemirror/language": "^6.9.0",
+    "@codemirror/language": "^6.2.0",
-    "@lezer/highlight": "^1.1.6",
+    "@lezer/highlight": "^1.0.0",
-    "@lezer/lr": "^1.3.10"
+    "@lezer/lr": "^1.2.0"
   },
   "devDependencies": {
-    "@lezer/generator": "^1.5.0",
+    "@lezer/generator": "^1.1.0",
     "mocha": "^9.2.2",
     "rollup": "^2.70.2",
     "rollup-plugin-dts": "^4.2.1",

packages/hoppscotch-backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoppscotch-backend",
-  "version": "2023.4.8",
+  "version": "2023.4.7",
   "description": "",
   "author": "",
   "private": true,
@@ -33,7 +33,7 @@
     "@nestjs/passport": "^9.0.0",
     "@nestjs/platform-express": "^9.2.1",
     "@nestjs/throttler": "^4.0.0",
-    "@prisma/client": "^4.16.2",
+    "@prisma/client": "^4.7.1",
     "apollo-server-express": "^3.11.1",
     "apollo-server-plugin-base": "^3.7.1",
     "argon2": "^0.30.3",
@@ -57,7 +57,7 @@
     "passport-jwt": "^4.0.1",
     "passport-local": "^1.0.0",
     "passport-microsoft": "^1.0.0",
-    "prisma": "^4.16.2",
+    "prisma": "^4.7.1",
     "reflect-metadata": "^0.1.13",
     "rimraf": "^3.0.2",
     "rxjs": "^7.6.0"

packages/hoppscotch-backend/prisma/schema.prisma

@@ -5,7 +5,7 @@ datasource db {
 
 generator client {
   provider      = "prisma-client-js"
-  binaryTargets = ["native", "debian-openssl-1.1.x", "debian-openssl-3.0.x"]
+  binaryTargets = ["native", "debian-openssl-1.1.x"]
 }
 
 model Team {

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

@@ -411,23 +411,6 @@ export class AdminResolver {
     return deletedTeam.right;
   }
 
-  @Mutation(() => Boolean, {
-    description: 'Revoke a team Invite by Invite ID',
-  })
-  @UseGuards(GqlAuthGuard, GqlAdminGuard)
-  async revokeTeamInviteByAdmin(
-    @Args({
-      name: 'inviteID',
-      description: 'Team Invite ID',
-      type: () => ID,
-    })
-    inviteID: string,
-  ): Promise<boolean> {
-    const invite = await this.adminService.revokeTeamInviteByID(inviteID);
-    if (E.isLeft(invite)) throwErr(invite.left);
-    return true;
-  }
-
   /* Subscriptions */
 
   @Subscription(() => InvitedUser, {

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

@@ -11,7 +11,6 @@ import {
   INVALID_EMAIL,
   ONLY_ONE_ADMIN_ACCOUNT,
   TEAM_INVITE_ALREADY_MEMBER,
-  TEAM_INVITE_NO_INVITE_FOUND,
   USER_ALREADY_INVITED,
   USER_IS_ADMIN,
   USER_NOT_FOUND,
@@ -182,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,
     );
 
@@ -258,7 +257,7 @@ export class AdminService {
       if (E.isRight(userInvitation)) {
         await this.teamInvitationService.revokeInvitation(
           userInvitation.right.id,
-        );
+        )();
       }
 
       return E.right(addedUser.right);
@@ -417,19 +416,4 @@ export class AdminService {
     if (E.isLeft(team)) return E.left(team.left);
     return E.right(team.right);
   }
-
-  /**
-   * Revoke a team invite by ID
-   * @param inviteID Team Invite ID
-   * @returns an Either of boolean or error
-   */
-  async revokeTeamInviteByID(inviteID: string) {
-    const teamInvite = await this.teamInvitationService.revokeInvitation(
-      inviteID,
-    );
-
-    if (E.isLeft(teamInvite)) return E.left(teamInvite.left);
-
-    return E.right(teamInvite.right);
-  }
 }

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

@@ -1,9 +0,0 @@
-import { Controller, Get } from '@nestjs/common';
-
-@Controller('ping')
-export class AppController {
-  @Get()
-  ping(): string {
-    return 'Success';
-  }
-}

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

@@ -19,7 +19,6 @@ import { UserCollectionModule } from './user-collection/user-collection.module';
 import { ShortcodeModule } from './shortcode/shortcode.module';
 import { COOKIES_NOT_FOUND } from './errors';
 import { ThrottlerModule } from '@nestjs/throttler';
-import { AppController } from './app.controller';
 
 @Module({
   imports: [
@@ -82,6 +81,5 @@ import { AppController } from './app.controller';
     ShortcodeModule,
   ],
   providers: [GQLComplexityPlugin],
-  controllers: [AppController],
 })
 export class AppModule {}

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

@@ -2,9 +2,9 @@ import {
   Body,
   Controller,
   Get,
-  InternalServerErrorException,
   Post,
   Query,
+  Req,
   Request,
   Res,
   UseGuards,
@@ -19,18 +19,12 @@ import { JwtAuthGuard } from './guards/jwt-auth.guard';
 import { GqlUser } from 'src/decorators/gql-user.decorator';
 import { AuthUser } from 'src/types/AuthUser';
 import { RTCookie } from 'src/decorators/rt-cookie.decorator';
-import {
+import { authCookieHandler, throwHTTPErr } from './helper';
-  AuthProvider,
-  authCookieHandler,
-  authProviderCheck,
-  throwHTTPErr,
-} from './helper';
 import { GoogleSSOGuard } from './guards/google-sso.guard';
 import { GithubSSOGuard } from './guards/github-sso.guard';
 import { MicrosoftSSOGuard } from './guards/microsoft-sso-.guard';
 import { ThrottlerBehindProxyGuard } from 'src/guards/throttler-behind-proxy.guard';
 import { SkipThrottle } from '@nestjs/throttler';
-import { AUTH_PROVIDER_NOT_SPECIFIED } from 'src/errors';
 
 @UseGuards(ThrottlerBehindProxyGuard)
 @Controller({ path: 'auth', version: '1' })
@@ -45,9 +39,6 @@ export class AuthController {
     @Body() authData: SignInMagicDto,
     @Query('origin') origin: string,
   ) {
-    if (!authProviderCheck(AuthProvider.EMAIL))
-      throwHTTPErr({ message: AUTH_PROVIDER_NOT_SPECIFIED, statusCode: 404 });
-
     const deviceIdToken = await this.authService.signInMagicLink(
       authData.email,
       origin,

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

@@ -11,7 +11,6 @@ import { RTJwtStrategy } from './strategies/rt-jwt.strategy';
 import { GoogleStrategy } from './strategies/google.strategy';
 import { GithubStrategy } from './strategies/github.strategy';
 import { MicrosoftStrategy } from './strategies/microsoft.strategy';
-import { AuthProvider, authProviderCheck } from './helper';
 
 @Module({
   imports: [
@@ -27,9 +26,9 @@ import { AuthProvider, authProviderCheck } from './helper';
     AuthService,
     JwtStrategy,
     RTJwtStrategy,
-    ...(authProviderCheck(AuthProvider.GOOGLE) ? [GoogleStrategy] : []),
+    GoogleStrategy,
-    ...(authProviderCheck(AuthProvider.GITHUB) ? [GithubStrategy] : []),
+    GithubStrategy,
-    ...(authProviderCheck(AuthProvider.MICROSOFT) ? [MicrosoftStrategy] : []),
+    MicrosoftStrategy,
   ],
   controllers: [AuthController],
 })

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/guards/github-sso.guard.ts

@@ -1,20 +1,8 @@
-import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
+import { ExecutionContext, Injectable } from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
-import { AuthProvider, authProviderCheck, throwHTTPErr } from '../helper';
-import { Observable } from 'rxjs';
-import { AUTH_PROVIDER_NOT_SPECIFIED } from 'src/errors';
 
 @Injectable()
-export class GithubSSOGuard extends AuthGuard('github') implements CanActivate {
+export class GithubSSOGuard extends AuthGuard('github') {
-  canActivate(
-    context: ExecutionContext,
-  ): boolean | Promise<boolean> | Observable<boolean> {
-    if (!authProviderCheck(AuthProvider.GITHUB))
-      throwHTTPErr({ message: AUTH_PROVIDER_NOT_SPECIFIED, statusCode: 404 });
-
-    return super.canActivate(context);
-  }
-
   getAuthenticateOptions(context: ExecutionContext) {
     const req = context.switchToHttp().getRequest();
 

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

@@ -1,20 +1,8 @@
-import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
+import { ExecutionContext, Injectable } from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
-import { AuthProvider, authProviderCheck, throwHTTPErr } from '../helper';
-import { Observable } from 'rxjs';
-import { AUTH_PROVIDER_NOT_SPECIFIED } from 'src/errors';
 
 @Injectable()
-export class GoogleSSOGuard extends AuthGuard('google') implements CanActivate {
+export class GoogleSSOGuard extends AuthGuard('google') {
-  canActivate(
-    context: ExecutionContext,
-  ): boolean | Promise<boolean> | Observable<boolean> {
-    if (!authProviderCheck(AuthProvider.GOOGLE))
-      throwHTTPErr({ message: AUTH_PROVIDER_NOT_SPECIFIED, statusCode: 404 });
-
-    return super.canActivate(context);
-  }
-
   getAuthenticateOptions(context: ExecutionContext) {
     const req = context.switchToHttp().getRequest();
 

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

@@ -1,26 +1,8 @@
-import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
+import { ExecutionContext, Injectable } from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
-import { AuthProvider, authProviderCheck, throwHTTPErr } from '../helper';
-import { Observable } from 'rxjs';
-import { AUTH_PROVIDER_NOT_SPECIFIED } from 'src/errors';
 
 @Injectable()
-export class MicrosoftSSOGuard
+export class MicrosoftSSOGuard extends AuthGuard('microsoft') {
-  extends AuthGuard('microsoft')
-  implements CanActivate
-{
-  canActivate(
-    context: ExecutionContext,
-  ): boolean | Promise<boolean> | Observable<boolean> {
-    if (!authProviderCheck(AuthProvider.MICROSOFT))
-      throwHTTPErr({
-        message: AUTH_PROVIDER_NOT_SPECIFIED,
-        statusCode: 404,
-      });
-
-    return super.canActivate(context);
-  }
-
   getAuthenticateOptions(context: ExecutionContext) {
     const req = context.switchToHttp().getRequest();
 

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

@@ -1,11 +1,10 @@
-import { HttpException, HttpStatus } from '@nestjs/common';
+import { ForbiddenException, HttpException, HttpStatus } from '@nestjs/common';
 import { DateTime } from 'luxon';
 import { AuthError } from 'src/types/AuthError';
 import { AuthTokens } from 'src/types/AuthTokens';
 import { Response } from 'express';
 import * as cookie from 'cookie';
-import { AUTH_PROVIDER_NOT_SPECIFIED, COOKIES_NOT_FOUND } from 'src/errors';
+import { COOKIES_NOT_FOUND } from 'src/errors';
-import { throwErr } from 'src/utils';
 
 enum AuthTokenType {
   ACCESS_TOKEN = 'access_token',
@@ -17,13 +16,6 @@ export enum Origin {
   APP = 'app',
 }
 
-export enum AuthProvider {
-  GOOGLE = 'GOOGLE',
-  GITHUB = 'GITHUB',
-  MICROSOFT = 'MICROSOFT',
-  EMAIL = 'EMAIL',
-}
-
 /**
  * This function allows throw to be used as an expression
  * @param errMessage Message present in the error message
@@ -105,25 +97,3 @@ export const subscriptionContextCookieParser = (rawCookies: string) => {
     refresh_token: cookies[AuthTokenType.REFRESH_TOKEN],
   };
 };
-
-/**
- * Check to see if given auth provider is present in the VITE_ALLOWED_AUTH_PROVIDERS env variable
- *
- * @param provider Provider we want to check the presence of
- * @returns Boolean if provider specified is present or not
- */
-export function authProviderCheck(provider: string) {
-  if (!provider) {
-    throwErr(AUTH_PROVIDER_NOT_SPECIFIED);
-  }
-
-  const envVariables = process.env.VITE_ALLOWED_AUTH_PROVIDERS
-    ? process.env.VITE_ALLOWED_AUTH_PROVIDERS.split(',').map((provider) =>
-        provider.trim().toUpperCase(),
-      )
-    : [];
-
-  if (!envVariables.includes(provider.toUpperCase())) return false;
-
-  return true;
-}

packages/hoppscotch-backend/src/errors.ts

@@ -22,30 +22,6 @@ export const AUTH_FAIL = 'auth/fail';
  */
 export const JSON_INVALID = 'json_invalid';
 
-/**
- * Auth Provider not specified
- * (Auth)
- */
-export const AUTH_PROVIDER_NOT_SPECIFIED = 'auth/provider_not_specified';
-
-/**
- * Environment variable "VITE_ALLOWED_AUTH_PROVIDERS" is not present in .env file
- */
-export const ENV_NOT_FOUND_KEY_AUTH_PROVIDERS =
-  '"VITE_ALLOWED_AUTH_PROVIDERS" is not present in .env file';
-
-/**
- * Environment variable "VITE_ALLOWED_AUTH_PROVIDERS" is empty in .env file
- */
-export const ENV_EMPTY_AUTH_PROVIDERS =
-  '"VITE_ALLOWED_AUTH_PROVIDERS" is empty in .env file';
-
-/**
- * Environment variable "VITE_ALLOWED_AUTH_PROVIDERS" contains unsupported provider in .env file
- */
-export const ENV_NOT_SUPPORT_AUTH_PROVIDERS =
-  '"VITE_ALLOWED_AUTH_PROVIDERS" contains an unsupported auth provider in .env file';
-
 /**
  * Tried to delete a user data document from fb firestore but failed.
  * (FirebaseService)
@@ -336,13 +312,6 @@ export const SHORTCODE_ALREADY_EXISTS = 'shortcode/already_exists' as const;
  */
 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)

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/main.ts

@@ -5,14 +5,11 @@ import * as cookieParser from 'cookie-parser';
 import { VersioningType } from '@nestjs/common';
 import * as session from 'express-session';
 import { emitGQLSchemaFile } from './gql-schema';
-import { checkEnvironmentAuthProvider } from './utils';
 
 async function bootstrap() {
   console.log(`Running in production: ${process.env.PRODUCTION}`);
   console.log(`Port: ${process.env.PORT}`);
 
-  checkEnvironmentAuthProvider();
-
   const app = await NestFactory.create(AppModule);
 
   app.use(

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,33 +345,33 @@ 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,
       );
 
       mockPrisma.teamEnvironment.create.mockResolvedValueOnce({
-        id: 'newid',
         ...teamEnvironment,
+        id: 'newid',
       });
 
       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);
     });
@@ -337,19 +382,19 @@ describe('TeamEnvironmentsService', () => {
       );
 
       mockPrisma.teamEnvironment.create.mockResolvedValueOnce({
-        id: 'newid',
         ...teamEnvironment,
+        id: 'newid',
       });
 
       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,27 @@
 import { Injectable } from '@nestjs/common';
+import * as T from 'fp-ts/Task';
 import * as O from 'fp-ts/Option';
+import * as TO from 'fp-ts/TaskOption';
+import * as TE from 'fp-ts/TaskEither';
 import * as E from 'fp-ts/Either';
+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,37 +32,38 @@ 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) {
+    return pipe(
+      () =>
+        this.prisma.teamInvitation.findUnique({
+          where: {
+            teamID_inviteeEmail: {
+              inviteeEmail: email,
+              teamID: team.id,
+            },
+          },
+        }),
+      TO.fromTask,
+      TO.chain(flow(O.fromNullable, TO.fromOption)),
+    );
   }
 
   /**
@@ -89,162 +92,211 @@ export class TeamInvitationService {
     }
   }
 
-  /**
+  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().req.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().req.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/user-history/user-history.service.spec.ts

@@ -24,8 +24,6 @@ beforeEach(() => {
   mockPubSub.publish.mockClear();
 });
 
-const date = new Date();
-
 describe('UserHistoryService', () => {
   describe('fetchUserHistory', () => {
     test('Should return a list of users REST history if exists', async () => {
@@ -402,7 +400,7 @@ describe('UserHistoryService', () => {
         request: [{}],
         responseMetadata: [{}],
         reqType: ReqType.REST,
-        executedOn: date,
+        executedOn: new Date(),
         isStarred: false,
       });
 
@@ -412,7 +410,7 @@ describe('UserHistoryService', () => {
         request: JSON.stringify([{}]),
         responseMetadata: JSON.stringify([{}]),
         reqType: ReqType.REST,
-        executedOn: date,
+        executedOn: new Date(),
         isStarred: false,
       };
 

packages/hoppscotch-backend/src/utils.ts

@@ -9,13 +9,7 @@ import * as E from 'fp-ts/Either';
 import * as A from 'fp-ts/Array';
 import { TeamMemberRole } from './team/team.model';
 import { User } from './user/user.model';
-import {
+import { JSON_INVALID } from './errors';
-  ENV_EMPTY_AUTH_PROVIDERS,
-  ENV_NOT_FOUND_KEY_AUTH_PROVIDERS,
-  ENV_NOT_SUPPORT_AUTH_PROVIDERS,
-  JSON_INVALID,
-} from './errors';
-import { AuthProvider } from './auth/helper';
 
 /**
  * A workaround to throw an exception in an expression.
@@ -158,31 +152,3 @@ export function isValidLength(title: string, length: number) {
 
   return true;
 }
-
-/**
- * This function is called by bootstrap() in main.ts
- *  It checks if the "VITE_ALLOWED_AUTH_PROVIDERS" environment variable is properly set or not.
- * If not, it throws an error.
- */
-export function checkEnvironmentAuthProvider() {
-  if (!process.env.hasOwnProperty('VITE_ALLOWED_AUTH_PROVIDERS')) {
-    throw new Error(ENV_NOT_FOUND_KEY_AUTH_PROVIDERS);
-  }
-
-  if (process.env.VITE_ALLOWED_AUTH_PROVIDERS === '') {
-    throw new Error(ENV_EMPTY_AUTH_PROVIDERS);
-  }
-
-  const givenAuthProviders = process.env.VITE_ALLOWED_AUTH_PROVIDERS.split(
-    ',',
-  ).map((provider) => provider.toLocaleUpperCase());
-  const supportedAuthProviders = Object.values(AuthProvider).map(
-    (provider: string) => provider.toLocaleUpperCase(),
-  );
-
-  for (const givenAuthProvider of givenAuthProviders) {
-    if (!supportedAuthProviders.includes(givenAuthProvider)) {
-      throw new Error(ENV_NOT_SUPPORT_AUTH_PROVIDERS);
-    }
-  }
-}

packages/hoppscotch-common/.eslintrc.js

@@ -29,18 +29,8 @@ module.exports = {
     "import/named": "off", // because, named import issue with typescript see: https://github.com/typescript-eslint/typescript-eslint/issues/154
     "no-console": "off",
     "no-debugger": process.env.HOPP_LINT_FOR_PROD === "true" ? "error" : "warn",
-    "prettier/prettier": [
+    "prettier/prettier":
       process.env.HOPP_LINT_FOR_PROD === "true" ? "error" : "warn",
-      {},
-      {
-        semi: false,
-        trailingComma: "es5",
-        singleQuote: false,
-        printWidth: 80,
-        useTabs: false,
-        tabWidth: 2,
-      },
-    ],
     "vue/multi-word-component-names": "off",
     "vue/no-side-effects-in-computed-properties": "off",
     "import/no-named-as-default": "off",

packages/hoppscotch-common/.prettierrc.js

@@ -1,8 +1,3 @@
 module.exports = {
-  semi: false,
+  semi: false
-  trailingComma: "es5",
-  singleQuote: false,
-  printWidth: 80,
-  useTabs: false,
-  tabWidth: 2
 }

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/assets/scss/styles.scss

@@ -4,7 +4,6 @@
   @apply after:backface-hidden;
   @apply selection:bg-accentDark;
   @apply selection:text-accentContrast;
-  @apply overscroll-none;
 }
 
 :root {
@@ -166,6 +165,12 @@ a {
       @apply truncate;
       @apply sm:inline-flex;
     }
+
+    .env-icon {
+      @apply transition;
+      @apply inline-flex;
+      @apply items-center;
+    }
   }
 
   .tippy-svg-arrow {
@@ -184,11 +189,10 @@ a {
   @apply border-solid border-dividerDark;
   @apply rounded;
   @apply shadow-lg;
-  @apply max-w-[45vw] #{!important};
 
   .tippy-content {
     @apply flex flex-col;
-    @apply max-h-[45vh];
+    @apply max-h-56;
     @apply items-stretch;
     @apply overflow-y-auto;
     @apply text-secondary text-body;
@@ -196,10 +200,6 @@ a {
     @apply leading-normal;
     @apply focus:outline-none;
     scroll-behavior: smooth;
-
-    & > span {
-      @apply block #{!important};
-    }
   }
 
   .tippy-svg-arrow {
@@ -215,7 +215,6 @@ a {
 
 [data-v-tippy] {
   @apply flex flex-1;
-  @apply truncate;
 }
 
 [interactive] > div {
@@ -326,7 +325,7 @@ pre.ace_editor {
   @apply after:font-icon;
   @apply after:text-current;
   @apply after:right-3;
-  @apply after:content-["\e5cf"];
+  @apply after:content-["\e313"];
   @apply after:text-lg;
 }
 
@@ -481,10 +480,6 @@ pre.ace_editor {
   }
 }
 
-.cm-scroller {
-  @apply overscroll-y-auto;
-}
-
 .cm-editor {
   .cm-line::selection {
     @apply bg-accentDark #{!important};
@@ -572,11 +567,3 @@ details[open] summary .indicator {
   @apply rounded;
   @apply border-0;
 }
-
-.gql-operation-not-highlight {
-  @apply opacity-50;
-}
-
-.gql-operation-highlight {
-  @apply opacity-100;
-}

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

@@ -1,7 +1,7 @@
 @mixin base-theme {
-  --font-sans: "Inter Variable", sans-serif;
+  --font-sans: "Inter", sans-serif;
-  --font-icon: "Material Symbols Rounded Variable";
+  --font-mono: "Roboto Mono", monospace;
-  --font-mono: "Roboto Mono Variable", monospace;
+  --font-icon: "Material Icons";
   --font-size-tiny: calc(var(--font-size-body) - 0.062rem);
 }
 

packages/hoppscotch-common/locales/en.json

@@ -31,7 +31,6 @@
     "open_workspace": "Open workspace",
     "paste": "Paste",
     "prettify": "Prettify",
-    "rename": "Rename",
     "remove": "Remove",
     "restore": "Restore",
     "save": "Save",
@@ -69,8 +68,6 @@
     "invite": "Invite",
     "invite_description": "Hoppscotch is an open source API development ecosystem. We designed a simple and intuitive interface for creating and managing your APIs. Hoppscotch is a tool that helps you build, test, document and share your APIs.",
     "invite_your_friends": "Invite your friends",
-    "social_links": "Social links",
-    "social_description": "Follow us on social media to stay updated with the latest news, updates and releases.",
     "join_discord_community": "Join our Discord community",
     "keyboard_shortcuts": "Keyboard shortcuts",
     "name": "Hoppscotch",
@@ -135,7 +132,6 @@
     "renamed": "Collection renamed",
     "request_in_use": "Request in use",
     "save_as": "Save as",
-    "save_to_collection": "Save to Collection",
     "select": "Select a Collection",
     "select_location": "Select location",
     "select_team": "Select a team",
@@ -153,15 +149,8 @@
     "remove_telemetry": "Are you sure you want to opt-out of Telemetry?",
     "request_change": "Are you sure you want to discard current request, unsaved changes will be lost.",
     "save_unsaved_tab": "Do you want to save changes made in this tab?",
-    "close_unsaved_tab": "Are you sure you want to close this tab?",
-    "close_unsaved_tabs": "Are you sure you want to close all tabs? {count} unsaved tabs will be lost.",
     "sync": "Would you like to restore your workspace from cloud? This will discard your local progress."
   },
-  "context_menu": {
-    "set_environment_variable": "Set as variable",
-    "add_parameter": "Add to parameter",
-    "open_link_in_new_tab": "Open link in new tab"
-  },
   "count": {
     "header": "Header {count}",
     "message": "Message {count}",
@@ -204,31 +193,17 @@
     "create_new": "Create new environment",
     "created": "Environment created",
     "deleted": "Environment deletion",
-    "duplicated": "Environment duplicated",
     "edit": "Edit Environment",
-    "global": "Global",
-    "empty_variables": "No variables",
-    "global_variables": "Global variables",
     "invalid_name": "Please provide a name for the environment",
-    "list": "Environment variables",
     "my_environments": "My Environments",
-    "name": "Name",
     "nested_overflow": "nested environment variables are limited to 10 levels",
     "new": "New Environment",
-    "no_active_environment": "No active environment",
     "no_environment": "No environment",
     "no_environment_description": "No environments were selected. Choose what to do with the following variables.",
-    "quick_peek": "Environment Quick Peek",
-    "replace_with_variable": "Replace with variable",
-    "scope": "Scope",
     "select": "Select environment",
-    "set": "Set environment",
-    "set_as_environment": "Set as environment",
     "team_environments": "Team Environments",
     "title": "Environments",
     "updated": "Environment updated",
-    "value": "Value",
-    "variable": "Variable",
     "variable_list": "Variable List"
   },
   "error": {
@@ -252,7 +227,6 @@
     "no_duration": "No duration",
     "no_results_found": "No matches found",
     "page_not_found": "This page could not be found",
-    "proxy_error": "Proxy error",
     "script_fail": "Could not execute pre-request script",
     "something_went_wrong": "Something went wrong",
     "test_script_fail": "Could not execute post-request script"
@@ -280,10 +254,6 @@
   "graphql": {
     "mutations": "Mutations",
     "schema": "Schema",
-    "switch_connection": "Switch connection",
-    "connection_switch_url": "You're connected to a GraphQL endpoint the connection URL is",
-    "connection_switch_new_url": "Switching to a tab will disconnected you from the active GraphQL connection. New connection URL is",
-    "connection_switch_confirm": "Do you want to connect with the latest GraphQL endpoint?",
     "subscriptions": "Subscriptions"
   },
   "group": {
@@ -313,30 +283,6 @@
     "preview": "Hide Preview",
     "sidebar": "Collapse sidebar"
   },
-  "inspections": {
-    "title": "Inspector",
-    "description": "Inspect possible errors",
-    "environment": {
-      "add_environment": "Add to Environment",
-      "not_found": "Environment variable “{environment}” not found."
-    },
-    "header": {
-      "cookie": "The browser doesn't allow Hoppscotch to set the Cookie Header. While we're working on the Hoppscotch Desktop App (coming soon), please use the Authorization Header instead."
-    },
-    "response": {
-      "401_error": "Please check your authentication credentials.",
-      "404_error": "Please check your request URL and method type.",
-      "network_error": "Please check your network connection.",
-      "cors_error": "Please check your Cross-Origin Resource Sharing configuration.",
-      "default_error": "Please check your request."
-    },
-    "url": {
-      "extension_not_installed": "Extension not installed.",
-      "extention_not_enabled": "Extension not enabled.",
-      "extention_enable_action": "Enable Browser Extension",
-      "extension_unknown_origin": "Make sure you've added the API endpoint's origin to the Hoppscotch Browser Extension list."
-    }
-  },
   "import": {
     "collections": "Import collections",
     "curl": "Import cURL",
@@ -473,10 +419,8 @@
     "payload": "Payload",
     "query": "Query",
     "raw_body": "Raw Request Body",
-    "rename": "Rename Request",
     "renamed": "Request renamed",
     "run": "Run",
-    "stop": "Stop",
     "save": "Save",
     "save_as": "Save as",
     "saved": "Request saved",
@@ -516,9 +460,9 @@
     "account_name_description": "This is your display name.",
     "background": "Background",
     "black_mode": "Black",
-    "dark_mode": "Dark",
     "change_font_size": "Change font size",
     "choose_language": "Choose language",
+    "dark_mode": "Dark",
     "delete_account": "Delete account",
     "delete_account_description": "Once you delete your account, all your data will be permanently deleted. This action cannot be undone.",
     "expand_navigation": "Expand navigation",
@@ -582,10 +526,6 @@
       "show_all": "Keyboard shortcuts",
       "title": "General"
     },
-    "others": {
-      "title": "Others",
-      "prettify": "Prettify Editor's Content"
-    },
     "miscellaneous": {
       "invite": "Invite people to Hoppscotch",
       "title": "Miscellaneous"
@@ -606,9 +546,6 @@
       "delete_method": "Select DELETE method",
       "get_method": "Select GET method",
       "head_method": "Select HEAD method",
-      "rename": "Rename Current Request",
-      "import_curl": "Import cURL",
-      "show_code": "Generate code snippet",
       "method": "Method",
       "next_method": "Select Next method",
       "post_method": "Select POST method",
@@ -617,7 +554,6 @@
       "reset_request": "Reset Request",
       "save_to_collections": "Save to Collections",
       "send_request": "Send Request",
-      "save_request": "Save Request",
       "title": "Request"
     },
     "response": {
@@ -626,10 +562,10 @@
       "title": "Response"
     },
     "theme": {
-      "black": "Switch theme to Black Mode",
+      "black": "Switch  theme to black mode",
-      "dark": "Switch theme to Dark Mode",
+      "dark": "Switch  theme to  dark mode",
-      "light": "Switch theme to Light Mode",
+      "light": "Switch  theme to light mode",
-      "system": "Switch theme to System Mode",
+      "system": "Switch  theme to system mode",
       "title": "Theme"
     }
   },
@@ -648,79 +584,8 @@
     "url": "URL"
   },
   "spotlight": {
-    "general": {
-      "help_menu": "Open help and support menu",
-      "chat": "Chat with support",
-      "open_docs": "Read Documentation",
-      "open_keybindings": "Open keyboard shortcuts",
-      "social": "Social links and GitHub",
-      "title": "General"
-    },
-    "miscellaneous": {
-      "invite": "Invite people to Hoppscotch",
-      "title": "Miscellaneous"
-    },
-    "request": {
-      "tab_parameters": "Open parameters tab",
-      "tab_body": "Open body tab",
-      "tab_headers": "Open headers tab",
-      "tab_authorization": "Open authorization tab",
-      "tab_pre_request_script": "Open pre-request script tab",
-      "tab_tests": "Open tests tab"
-    },
-    "response": {
-      "copy": "Copy response as JSON",
-      "download": "Download response as file",
-      "title": "Response"
-    },
-    "environments": {
-      "new": "Create new environment",
-      "new_variable": "Create a new environment variable",
-      "edit": "Edit selected environment",
-      "delete": "Delete selected environment",
-      "duplicate": "Duplicate selected environment",
-      "edit_global": "Edit global environment",
-      "duplicate_global": "Duplicate global environment",
-      "title": "Environments"
-    },
-    "workspace": {
-      "new": "Create new team",
-      "edit": "Edit selected team",
-      "delete": "Delete selected team",
-      "invite": "Invite people to team",
-      "switch_to_personal": "Switch to personal workspace",
-      "title": "Teams"
-    },
-    "tab": {
-      "close_current": "Close current tab",
-      "close_others": "Close other tabs",
-      "new_tab": "Open a new tab",
-      "title": "Tabs"
-    },
     "section": {
-      "user": "User",
+      "user": "User"
-      "theme": "Theme",
-      "interface": "Interface",
-      "interceptor": "Interceptor"
-    },
-    "change_interceptor": "Change Interceptor",
-    "change_language": "Change Language",
-    "install_extension": "Install Browser Extension",
-    "settings": {
-      "theme": {
-        "black": "Black Mode",
-        "dark": "Dark Mode",
-        "light": "Light Mode",
-        "system": "System Mode"
-      },
-      "font": {
-        "size_sm": "Change to Small",
-        "size_md": "Change to Medium",
-        "size_lg": "Change to Large"
-      },
-      "change_interceptor": "Change Interceptor",
-      "change_language": "Change Language",
-      "install_extension": "Install Browser Extension"
     }
   },
   "sse": {
@@ -780,11 +645,8 @@
   "tab": {
     "authorization": "Authorization",
     "body": "Body",
-    "close": "Close Tab",
-    "close_others": "Close other Tabs",
     "collections": "Collections",
     "documentation": "Documentation",
-    "duplicate": "Duplicate Tab",
     "environments": "Environments",
     "headers": "Headers",
     "history": "History",

packages/hoppscotch-common/locales/tw.json

@@ -19,7 +19,7 @@
     "edit": "編輯",
     "filter": "篩選回應",
     "go_back": "返回",
-    "go_forward": "向前",
+    "go_forward": "Go forward",
     "group_by": "分組方式",
     "label": "標籤",
     "learn_more": "瞭解更多",
@@ -117,37 +117,37 @@
     "username": "使用者名稱"
   },
   "collection": {
-    "created": "集合已建立",
+    "created": "組合已建立",
-    "different_parent": "無法為父集合不同的集合重新排序",
+    "different_parent": "Cannot reorder collection with different parent",
-    "edit": "編輯集合",
+    "edit": "編輯組合",
-    "invalid_name": "請提供有效的集合名稱",
+    "invalid_name": "請提供有效的組合名稱",
-    "invalid_root_move": "集合已在根目錄",
+    "invalid_root_move": "Collection already in the root",
-    "moved": "移動成功",
+    "moved": "Moved Successfully",
-    "my_collections": "我的集合",
+    "my_collections": "我的組合",
-    "name": "我的新集合",
+    "name": "我的新組合",
-    "name_length_insufficient": "集合名稱至少要有 3 個字元。",
+    "name_length_insufficient": "組合名稱至少要有 3 個字元。",
-    "new": "建立集合",
+    "new": "建立組合",
-    "order_changed": "集合順序已更新",
+    "order_changed": "Collection Order Updated",
-    "renamed": "集合已重新命名",
+    "renamed": "組合已重新命名",
     "request_in_use": "請求正在使用中",
     "save_as": "另存為",
-    "select": "選擇一個集合",
+    "select": "選擇一個組合",
     "select_location": "選擇位置",
     "select_team": "選擇一個團隊",
-    "team_collections": "團隊集合"
+    "team_collections": "團隊組合"
   },
   "confirm": {
     "exit_team": "您確定要離開此團隊嗎？",
     "logout": "您確定要登出嗎？",
-    "remove_collection": "您確定要永久刪除該集合嗎？",
+    "remove_collection": "您確定要永久刪除該組合嗎？",
     "remove_environment": "您確定要永久刪除該環境嗎？",
     "remove_folder": "您確定要永久刪除該資料夾嗎？",
     "remove_history": "您確定要永久刪除全部歷史記錄嗎？",
     "remove_request": "您確定要永久刪除該請求嗎？",
     "remove_team": "您確定要刪除該團隊嗎？",
     "remove_telemetry": "您確定要退出遙測服務嗎？",
-    "request_change": "您確定要捨棄目前的請求嗎？未儲存的變更將遺失。",
+    "request_change": "您確定要捨棄當前請求嗎？未儲存的變更將遺失。",
-    "save_unsaved_tab": "您要儲存在此分頁做出的改動嗎？",
+    "save_unsaved_tab": "Do you want to save changes made in this tab?",
     "sync": "您想從雲端恢復您的工作區嗎？這將丟棄您的本地進度。"
   },
   "count": {
@@ -160,13 +160,13 @@
   },
   "documentation": {
     "generate": "產生文件",
-    "generate_message": "匯入 Hoppscotch 集合以隨時隨地產生 API 文件。"
+    "generate_message": "匯入 Hoppscotch 組合以隨時隨地產生 API 文件。"
   },
   "empty": {
     "authorization": "該請求沒有使用任何授權",
     "body": "該請求沒有任何請求主體",
-    "collection": "集合為空",
+    "collection": "組合為空",
-    "collections": "集合為空",
+    "collections": "組合為空",
     "documentation": "連線到 GraphQL 端點以檢視文件",
     "endpoint": "端點不能留空",
     "environments": "環境為空",
@@ -209,7 +209,7 @@
     "browser_support_sse": "此瀏覽器似乎不支援 SSE。",
     "check_console_details": "檢查控制台日誌以獲悉詳情",
     "curl_invalid_format": "cURL 格式不正確",
-    "danger_zone": "危險地帶",
+    "danger_zone": "Danger zone",
     "delete_account": "您的帳號目前為這些團隊的擁有者：",
     "delete_account_description": "您在刪除帳號前必須先將您自己從團隊中移除、轉移擁有權，或是刪除團隊。",
     "empty_req_name": "空請求名稱",
@@ -277,38 +277,38 @@
     "tests": "編寫測試指令碼以自動除錯。"
   },
   "hide": {
-    "collection": "隱藏集合面板",
+    "collection": "隱藏組合面板",
     "more": "隱藏更多",
     "preview": "隱藏預覽",
     "sidebar": "隱藏側邊欄"
   },
   "import": {
-    "collections": "匯入集合",
+    "collections": "匯入組合",
     "curl": "匯入 cURL",
     "failed": "匯入失敗",
     "from_gist": "從 Gist 匯入",
     "from_gist_description": "從 Gist 網址匯入",
     "from_insomnia": "從 Insomnia 匯入",
-    "from_insomnia_description": "從 Insomnia 集合匯入",
+    "from_insomnia_description": "從 Insomnia 組合匯入",
     "from_json": "從 Hoppscotch 匯入",
-    "from_json_description": "從 Hoppscotch 集合檔匯入",
+    "from_json_description": "從 Hoppscotch 組合檔匯入",
-    "from_my_collections": "從我的集合匯入",
+    "from_my_collections": "從我的組合匯入",
-    "from_my_collections_description": "從我的集合檔匯入",
+    "from_my_collections_description": "從我的組合檔匯入",
     "from_openapi": "從 OpenAPI 匯入",
     "from_openapi_description": "從 OpenAPI 規格檔 (YML/JSON) 匯入",
     "from_postman": "從 Postman 匯入",
-    "from_postman_description": "從 Postman 集合匯入",
+    "from_postman_description": "從 Postman 組合匯入",
     "from_url": "從網址匯入",
     "gist_url": "輸入 Gist 網址",
     "import_from_url_invalid_fetch": "無法從網址取得資料",
-    "import_from_url_invalid_file_format": "匯入集合時發生錯誤",
+    "import_from_url_invalid_file_format": "匯入組合時發生錯誤",
     "import_from_url_invalid_type": "不支援此類型。可接受的值為 'hoppscotch'、'openapi'、'postman'、'insomnia'",
-    "import_from_url_success": "已匯入集合",
+    "import_from_url_success": "已匯入組合",
-    "json_description": "從 Hoppscotch 集合 JSON 檔匯入集合",
+    "json_description": "從 Hoppscotch 組合 JSON 檔匯入組合",
     "title": "匯入"
   },
   "layout": {
-    "collapse_collection": "隱藏或顯示集合",
+    "collapse_collection": "隱藏或顯示組合",
     "collapse_sidebar": "隱藏或顯示側邊欄",
     "column": "垂直版面",
     "name": "配置",
@@ -316,8 +316,8 @@
     "zen_mode": "專注模式"
   },
   "modal": {
-    "close_unsaved_tab": "您有未儲存的改動",
+    "close_unsaved_tab": "You have unsaved changes",
-    "collections": "集合",
+    "collections": "組合",
     "confirm": "確認",
     "edit_request": "編輯請求",
     "import_export": "匯入／匯出"
@@ -374,9 +374,9 @@
     "email_verification_mail": "已將驗證信寄送至您的電子郵件地址。請點擊信中連結以驗證您的電子郵件地址。",
     "no_permission": "您沒有權限執行此操作。",
     "owner": "擁有者",
-    "owner_description": "擁有者可以新增、編輯和刪除請求、集合和團隊成員。",
+    "owner_description": "擁有者可以新增、編輯和刪除請求、組合和團隊成員。",
     "roles": "角色",
-    "roles_description": "角色用來控制對共用集合的存取權。",
+    "roles_description": "角色用來控制對共用組合的存取權。",
     "updated": "已更新個人檔案",
     "viewer": "檢視者",
     "viewer_description": "檢視者只能檢視和使用請求。"
@@ -396,8 +396,8 @@
       "text": "文字"
     },
     "copy_link": "複製連結",
-    "different_collection": "無法重新排列來自不同集合的請求",
+    "different_collection": "Cannot reorder requests from different collections",
-    "duplicated": "已複製請求",
+    "duplicated": "Request duplicated",
     "duration": "持續時間",
     "enter_curl": "輸入 cURL",
     "generate_code": "產生程式碼",
@@ -405,10 +405,10 @@
     "header_list": "請求標頭列表",
     "invalid_name": "請提供請求名稱",
     "method": "方法",
-    "moved": "已移動請求",
+    "moved": "Request moved",
     "name": "請求名稱",
     "new": "新請求",
-    "order_changed": "已更新請求順序",
+    "order_changed": "Request Order Updated",
     "override": "覆寫",
     "override_help": "在標頭設置 <kbd>Content-Type</kbd>",
     "overriden": "已覆寫",
@@ -432,7 +432,7 @@
     "view_my_links": "檢視我的連結"
   },
   "response": {
-    "audio": "音訊",
+    "audio": "Audio",
     "body": "回應本體",
     "filter_response_body": "篩選 JSON 回應本體 (使用 JSONPath 語法)",
     "headers": "回應標頭",
@@ -446,7 +446,7 @@
     "status": "狀態",
     "time": "時間",
     "title": "回應",
-    "video": "視訊",
+    "video": "Video",
     "waiting_for_connection": "等待連線",
     "xml": "XML"
   },
@@ -494,7 +494,7 @@
     "short_codes_description": "我們為您打造的快捷碼。",
     "sidebar_on_left": "左側邊欄",
     "sync": "同步",
-    "sync_collections": "集合",
+    "sync_collections": "組合",
     "sync_description": "這些設定會同步到雲端。",
     "sync_environments": "環境",
     "sync_history": "歷史",
@@ -551,7 +551,7 @@
       "previous_method": "選擇上一個方法",
       "put_method": "選擇 PUT 方法",
       "reset_request": "重置請求",
-      "save_to_collections": "儲存到集合",
+      "save_to_collections": "儲存到組合",
       "send_request": "傳送請求",
       "title": "請求"
     },
@@ -570,7 +570,7 @@
   },
   "show": {
     "code": "顯示程式碼",
-    "collection": "顯示集合面板",
+    "collection": "顯示組合面板",
     "more": "顯示更多",
     "sidebar": "顯示側邊欄"
   },
@@ -639,9 +639,9 @@
   "tab": {
     "authorization": "授權",
     "body": "請求本體",
-    "collections": "集合",
+    "collections": "組合",
     "documentation": "幫助文件",
-    "environments": "環境",
+    "environments": "Environments",
     "headers": "請求標頭",
     "history": "歷史記錄",
     "mqtt": "MQTT",
@@ -666,7 +666,7 @@
     "email_do_not_match": "電子信箱與您的帳號資料不一致。請聯絡您的團隊擁有者。",
     "exit": "退出團隊",
     "exit_disabled": "團隊擁有者無法退出團隊",
-    "invalid_coll_id": "集合 ID 無效",
+    "invalid_coll_id": "Invalid collection ID",
     "invalid_email_format": "電子信箱格式無效",
     "invalid_id": "團隊 ID 無效。請聯絡您的團隊擁有者。",
     "invalid_invite_link": "邀請連結無效",
@@ -690,21 +690,21 @@
     "member_removed": "使用者已移除",
     "member_role_updated": "使用者角色已更新",
     "members": "成員",
-    "more_members": "還有 {count} 位",
+    "more_members": "+{count} more",
     "name_length_insufficient": "團隊名稱至少為 6 個字元",
     "name_updated": "團隊名稱已更新",
     "new": "新團隊",
     "new_created": "已建立新團隊",
     "new_name": "我的新團隊",
-    "no_access": "您沒有編輯集合的許可權",
+    "no_access": "您沒有編輯組合的許可權",
     "no_invite_found": "未找到邀請。請聯絡您的團隊擁有者。",
-    "no_request_found": "找不到請求。",
+    "no_request_found": "Request not found.",
     "not_found": "找不到團隊。請聯絡您的團隊擁有者。",
     "not_valid_viewer": "您不是一個有效的檢視者。請聯絡您的團隊擁有者。",
-    "parent_coll_move": "無法將集合移動至子集合",
+    "parent_coll_move": "Cannot move collection to a child collection",
     "pending_invites": "待定邀請",
     "permissions": "許可權",
-    "same_target_destination": "目標和目的地相同",
+    "same_target_destination": "Same target and destination",
     "saved": "團隊已儲存",
     "select_a_team": "選擇團隊",
     "title": "團隊",
@@ -734,9 +734,9 @@
     "url": "網址"
   },
   "workspace": {
-    "change": "切換工作區",
+    "change": "Change workspace",
-    "personal": "我的工作區",
+    "personal": "My Workspace",
-    "team": "團隊工作區",
+    "team": "Team Workspace",
-    "title": "工作區"
+    "title": "Workspaces"
   }
 }

packages/hoppscotch-common/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/common",
   "private": true,
-  "version": "2023.4.8",
+  "version": "2023.4.7",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
     "test": "vitest --run",
@@ -22,140 +22,138 @@
   },
   "dependencies": {
     "@apidevtools/swagger-parser": "^10.1.0",
-    "@codemirror/autocomplete": "^6.9.0",
+    "@codemirror/autocomplete": "^6.0.3",
-    "@codemirror/commands": "^6.2.4",
+    "@codemirror/commands": "^6.0.1",
-    "@codemirror/lang-javascript": "^6.1.9",
+    "@codemirror/lang-javascript": "^6.0.1",
-    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-json": "^6.0.0",
-    "@codemirror/lang-xml": "^6.0.2",
+    "@codemirror/lang-xml": "^6.0.0",
-    "@codemirror/language": "^6.9.0",
+    "@codemirror/language": "^6.2.0",
-    "@codemirror/legacy-modes": "^6.3.3",
+    "@codemirror/legacy-modes": "^6.1.0",
-    "@codemirror/lint": "^6.4.0",
+    "@codemirror/lint": "^6.0.0",
-    "@codemirror/search": "^6.5.1",
+    "@codemirror/search": "^6.0.0",
-    "@codemirror/state": "^6.2.1",
+    "@codemirror/state": "^6.1.0",
-    "@codemirror/view": "^6.16.0",
+    "@codemirror/view": "^6.0.2",
-    "@fontsource-variable/inter": "^5.0.8",
-    "@fontsource-variable/material-symbols-rounded": "^5.0.7",
-    "@fontsource-variable/roboto-mono": "^5.0.9",
     "@hoppscotch/codemirror-lang-graphql": "workspace:^",
     "@hoppscotch/data": "workspace:^",
     "@hoppscotch/js-sandbox": "workspace:^",
     "@hoppscotch/ui": "workspace:^",
     "@hoppscotch/vue-toasted": "^0.1.0",
-    "@lezer/highlight": "^1.1.6",
+    "@lezer/highlight": "^1.0.0",
-    "@sentry/tracing": "^7.64.0",
+    "@sentry/tracing": "^7.13.0",
-    "@sentry/vue": "^7.64.0",
+    "@sentry/vue": "^7.13.0",
-    "@urql/core": "^4.1.1",
+    "@urql/core": "^2.5.0",
     "@urql/devtools": "^2.0.3",
-    "@urql/exchange-auth": "^2.1.6",
+    "@urql/exchange-auth": "^0.1.7",
-    "@urql/exchange-graphcache": "^6.3.2",
+    "@urql/exchange-graphcache": "^4.4.3",
-    "@vitejs/plugin-legacy": "^4.1.1",
+    "@vitejs/plugin-legacy": "^2.3.0",
-    "@vueuse/core": "^10.3.0",
+    "@vueuse/core": "^8.9.4",
-    "@vueuse/head": "^1.3.1",
+    "@vueuse/head": "^0.7.9",
     "acorn-walk": "^8.2.0",
-    "axios": "^1.4.0",
+    "axios": "^0.21.4",
     "buffer": "^6.0.3",
     "dioc": "workspace:^",
     "esprima": "^4.0.1",
     "events": "^3.3.0",
-    "fp-ts": "^2.16.1",
+    "fp-ts": "^2.12.1",
     "fuse.js": "^6.6.2",
     "globalthis": "^1.0.3",
-    "graphql": "^16.8.0",
+    "graphql": "^15.5.0",
     "graphql-language-service-interface": "^2.9.1",
     "graphql-tag": "^2.12.6",
     "httpsnippet": "^2.0.0",
-    "insomnia-importers": "^3.6.0",
+    "insomnia-importers": "^3.3.0",
-    "io-ts": "^2.2.20",
+    "io-ts": "^2.2.16",
     "js-yaml": "^4.1.0",
-    "jsonpath-plus": "^7.2.0",
+    "jsonpath-plus": "^7.0.0",
     "lodash-es": "^4.17.21",
-    "lossless-json": "^2.0.11",
+    "lossless-json": "^2.0.8",
     "minisearch": "^6.1.0",
     "nprogress": "^0.2.0",
     "paho-mqtt": "^1.1.0",
     "path": "^0.12.7",
-    "postman-collection": "^4.2.0",
+    "postman-collection": "^4.1.4",
     "process": "^0.11.10",
-    "qs": "^6.11.2",
+    "qs": "^6.10.3",
-    "rxjs": "^7.8.1",
+    "rxjs": "^7.5.5",
     "socket.io-client-v2": "npm:socket.io-client@^2.4.0",
     "socket.io-client-v3": "npm:socket.io-client@^3.1.3",
     "socket.io-client-v4": "npm:socket.io-client@^4.4.1",
     "socketio-wildcard": "^2.0.0",
-    "splitpanes": "^3.1.5",
+    "splitpanes": "^3.1.1",
     "stream-browserify": "^3.0.0",
     "subscriptions-transport-ws": "^0.11.0",
     "tern": "^0.24.3",
     "timers": "^0.1.1",
     "tippy.js": "^6.3.7",
-    "url": "^0.11.1",
+    "url": "^0.11.0",
-    "util": "^0.12.5",
+    "util": "^0.12.4",
-    "uuid": "^9.0.0",
+    "uuid": "^8.3.2",
-    "vue": "^3.3.4",
+    "vue": "^3.2.25",
+    "vue-github-button": "^3.0.3",
     "vue-i18n": "^9.2.2",
-    "vue-pdf-embed": "^1.1.6",
+    "vue-pdf-embed": "^1.1.4",
-    "vue-router": "^4.2.4",
+    "vue-router": "^4.0.16",
-    "vue-tippy": "6.3.1",
+    "vue-tippy": "6.0.0-alpha.58",
     "vuedraggable-es": "^4.1.1",
-    "wonka": "^6.3.4",
+    "wonka": "^4.0.15",
-    "workbox-window": "^7.0.0",
+    "workbox-window": "^6.5.4",
-    "xml-formatter": "^3.5.0",
+    "xml-formatter": "^3.4.1",
     "yargs-parser": "^21.1.1"
   },
   "devDependencies": {
-    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
-    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
-    "@graphql-codegen/add": "^5.0.0",
+    "@graphql-codegen/add": "^3.2.0",
-    "@graphql-codegen/cli": "^5.0.0",
+    "@graphql-codegen/cli": "^2.8.0",
-    "@graphql-codegen/typed-document-node": "^5.0.1",
+    "@graphql-codegen/typed-document-node": "^2.3.1",
-    "@graphql-codegen/typescript": "^4.0.1",
+    "@graphql-codegen/typescript": "^2.7.1",
-    "@graphql-codegen/typescript-operations": "^4.0.1",
+    "@graphql-codegen/typescript-operations": "^2.5.1",
-    "@graphql-codegen/typescript-urql-graphcache": "^2.4.5",
+    "@graphql-codegen/typescript-urql-graphcache": "^2.3.1",
-    "@graphql-codegen/urql-introspection": "^2.2.1",
+    "@graphql-codegen/urql-introspection": "^2.2.0",
-    "@graphql-typed-document-node/core": "^3.2.0",
+    "@graphql-typed-document-node/core": "^3.1.1",
-    "@iconify-json/lucide": "^1.1.119",
+    "@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.3.3",
+    "@rushstack/eslint-patch": "^1.1.4",
     "@types/js-yaml": "^4.0.5",
-    "@types/lodash-es": "^4.17.8",
+    "@types/lodash-es": "^4.17.6",
     "@types/lossless-json": "^1.0.1",
     "@types/nprogress": "^0.2.0",
-    "@types/paho-mqtt": "^1.0.7",
+    "@types/paho-mqtt": "^1.0.6",
     "@types/postman-collection": "^3.5.7",
     "@types/splitpanes": "^2.2.1",
-    "@types/uuid": "^9.0.2",
+    "@types/uuid": "^8.3.4",
     "@types/yargs-parser": "^21.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.19.0",
-    "@typescript-eslint/parser": "^6.4.0",
+    "@typescript-eslint/parser": "^5.19.0",
-    "@vitejs/plugin-vue": "^4.3.1",
+    "@vitejs/plugin-vue": "^3.1.0",
-    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/compiler-sfc": "^3.2.39",
-    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/eslint-config-typescript": "^11.0.1",
-    "@vue/runtime-core": "^3.3.4",
+    "@vue/runtime-core": "^3.2.39",
     "cross-env": "^7.0.3",
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.0.3",
-    "eslint": "^8.47.0",
+    "eslint": "^8.24.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-vue": "^9.5.1",
     "npm-run-all": "^4.1.5",
-    "openapi-types": "^12.1.3",
+    "openapi-types": "^12.0.0",
-    "rollup-plugin-polyfill-node": "^0.12.0",
+    "rollup-plugin-polyfill-node": "^0.10.1",
-    "sass": "^1.66.0",
+    "sass": "^1.53.0",
-    "typescript": "^5.1.6",
+    "typescript": "^4.5.4",
-    "unplugin-fonts": "^1.0.3",
+    "unplugin-icons": "^0.14.9",
-    "unplugin-icons": "^0.16.5",
+    "unplugin-vue-components": "^0.21.0",
-    "unplugin-vue-components": "^0.25.1",
+    "vite": "^3.1.4",
-    "vite": "^4.4.9",
+    "vite-plugin-checker": "^0.5.1",
-    "vite-plugin-checker": "^0.6.1",
+    "vite-plugin-fonts": "^0.6.0",
-    "vite-plugin-html-config": "^1.0.11",
+    "vite-plugin-html-config": "^1.0.10",
-    "vite-plugin-inspect": "^0.7.38",
+    "vite-plugin-inspect": "^0.7.4",
-    "vite-plugin-pages": "^0.31.0",
+    "vite-plugin-pages": "^0.26.0",
-    "vite-plugin-pages-sitemap": "^1.6.1",
+    "vite-plugin-pages-sitemap": "^1.4.0",
-    "vite-plugin-pwa": "^0.16.4",
+    "vite-plugin-pwa": "^0.13.1",
-    "vite-plugin-vue-layouts": "^0.8.0",
+    "vite-plugin-vue-layouts": "^0.7.0",
-    "vite-plugin-windicss": "^1.9.1",
+    "vite-plugin-windicss": "^1.8.8",
-    "vitest": "^0.34.2",
+    "vitest": "^0.32.2",
-    "vue-tsc": "^1.8.8",
+    "vue-tsc": "^0.38.2",
     "windicss": "^3.5.6"
   }
 }

packages/hoppscotch-common/public/badge.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="156" height="32" fill="none"><rect width="156" height="32" fill="#6366f1" rx="4"/><text xmlns="http://www.w3.org/2000/svg" x="50%" y="50%" fill="#fff" dominant-baseline="central" font-family="Helvetica,sans-serif" font-size="12" font-weight="bold" text-anchor="middle" text-rendering="geometricPrecision">▶  Run  in Hoppscotch</text></svg>

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

@@ -1,20 +1,18 @@
-/* eslint-disable */
+// generated by unplugin-vue-components
-/* prettier-ignore */
+// We suggest you to commit this file into source control
-// @ts-nocheck
-// Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
 export {}
 
-declare module 'vue' {
+declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AppActionHandler: typeof import('./components/app/ActionHandler.vue')['default']
     AppAnnouncement: typeof import('./components/app/Announcement.vue')['default']
-    AppContextMenu: typeof import('./components/app/ContextMenu.vue')['default']
     AppDeveloperOptions: typeof import('./components/app/DeveloperOptions.vue')['default']
     AppFooter: typeof import('./components/app/Footer.vue')['default']
     AppGitHubStarButton: typeof import('./components/app/GitHubStarButton.vue')['default']
     AppHeader: typeof import('./components/app/Header.vue')['default']
-    AppInspection: typeof import('./components/app/Inspection.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']
@@ -24,13 +22,9 @@ declare module 'vue' {
     AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
     AppShortcutsPrompt: typeof import('./components/app/ShortcutsPrompt.vue')['default']
     AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
-    AppSocial: typeof import('./components/app/Social.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']
+    AppSpotlightEntryHistory: typeof import('./components/app/spotlight/entry/History.vue')['default']
-    AppSpotlightEntryGQLRequest: typeof import('./components/app/spotlight/entry/GQLRequest.vue')['default']
-    AppSpotlightEntryRESTHistory: typeof import('./components/app/spotlight/entry/RESTHistory.vue')['default']
-    AppSpotlightEntryRESTRequest: typeof import('./components/app/spotlight/entry/RESTRequest.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']
@@ -59,7 +53,6 @@ declare module 'vue' {
     CollectionsSaveRequest: typeof import('./components/collections/SaveRequest.vue')['default']
     CollectionsTeamCollections: typeof import('./components/collections/TeamCollections.vue')['default']
     Environments: typeof import('./components/environments/index.vue')['default']
-    EnvironmentsAdd: typeof import('./components/environments/Add.vue')['default']
     EnvironmentsImportExport: typeof import('./components/environments/ImportExport.vue')['default']
     EnvironmentsMy: typeof import('./components/environments/my/index.vue')['default']
     EnvironmentsMyDetails: typeof import('./components/environments/my/Details.vue')['default']
@@ -72,18 +65,12 @@ declare module 'vue' {
     FirebaseLogout: typeof import('./components/firebase/Logout.vue')['default']
     GraphqlAuthorization: typeof import('./components/graphql/Authorization.vue')['default']
     GraphqlField: typeof import('./components/graphql/Field.vue')['default']
-    GraphqlHeaders: typeof import('./components/graphql/Headers.vue')['default']
-    GraphqlQuery: typeof import('./components/graphql/Query.vue')['default']
     GraphqlRequest: typeof import('./components/graphql/Request.vue')['default']
     GraphqlRequestOptions: typeof import('./components/graphql/RequestOptions.vue')['default']
-    GraphqlRequestTab: typeof import('./components/graphql/RequestTab.vue')['default']
     GraphqlResponse: typeof import('./components/graphql/Response.vue')['default']
     GraphqlSidebar: typeof import('./components/graphql/Sidebar.vue')['default']
-    GraphqlSubscriptionLog: typeof import('./components/graphql/SubscriptionLog.vue')['default']
-    GraphqlTabHead: typeof import('./components/graphql/TabHead.vue')['default']
     GraphqlType: typeof import('./components/graphql/Type.vue')['default']
     GraphqlTypeLink: typeof import('./components/graphql/TypeLink.vue')['default']
-    GraphqlVariable: typeof import('./components/graphql/Variable.vue')['default']
     History: typeof import('./components/history/index.vue')['default']
     HistoryGraphqlCard: typeof import('./components/history/graphql/Card.vue')['default']
     HistoryRestCard: typeof import('./components/history/rest/Card.vue')['default']
@@ -95,22 +82,17 @@ declare module 'vue' {
     HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
     HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']
     HoppSmartFileChip: typeof import('@hoppscotch/ui')['HoppSmartFileChip']
-    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
-    HoppSmartIntersection: typeof import('@hoppscotch/ui')['HoppSmartIntersection']
     HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
     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']
-    HoppSmartRadio: typeof import('@hoppscotch/ui')['HoppSmartRadio']
     HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
     HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
     HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
     HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
     HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
-    HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
-    HoppSmartTree: typeof import('@hoppscotch/ui')['HoppSmartTree']
     HoppSmartWindow: typeof import('@hoppscotch/ui')['HoppSmartWindow']
     HoppSmartWindows: typeof import('@hoppscotch/ui')['HoppSmartWindows']
     HttpAuthorization: typeof import('./components/http/Authorization.vue')['default']
@@ -132,17 +114,14 @@ declare module 'vue' {
     HttpResponse: typeof import('./components/http/Response.vue')['default']
     HttpResponseMeta: typeof import('./components/http/ResponseMeta.vue')['default']
     HttpSidebar: typeof import('./components/http/Sidebar.vue')['default']
-    HttpTabHead: typeof import('./components/http/TabHead.vue')['default']
     HttpTestResult: typeof import('./components/http/TestResult.vue')['default']
     HttpTestResultEntry: typeof import('./components/http/TestResultEntry.vue')['default']
     HttpTestResultEnv: typeof import('./components/http/TestResultEnv.vue')['default']
     HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
-    IconLucideActivity: typeof import('~icons/lucide/activity')['default']
     IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
-    IconLucideArrowUpRight: typeof import('~icons/lucide/arrow-up-right')['default']
     IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
@@ -152,11 +131,9 @@ declare module 'vue' {
     IconLucideLayers: typeof import('~icons/lucide/layers')['default']
     IconLucideListEnd: typeof import('~icons/lucide/list-end')['default']
     IconLucideMinus: typeof import('~icons/lucide/minus')['default']
-    IconLucideRss: typeof import('~icons/lucide/rss')['default']
+    IconLucideRefreshCw: typeof import('~icons/lucide/refresh-cw')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
-    IconLucideVerified: typeof import('~icons/lucide/verified')['default']
-    InterceptorsExtensionSubtitle: typeof import('./components/interceptors/ExtensionSubtitle.vue')['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']
@@ -176,8 +153,6 @@ declare module 'vue' {
     RealtimeLog: typeof import('./components/realtime/Log.vue')['default']
     RealtimeLogEntry: typeof import('./components/realtime/LogEntry.vue')['default']
     RealtimeSubscription: typeof import('./components/realtime/Subscription.vue')['default']
-    SettingsExtension: typeof import('./components/settings/Extension.vue')['default']
-    SettingsProxy: typeof import('./components/settings/Proxy.vue')['default']
     SmartAccentModePicker: typeof import('./components/smart/AccentModePicker.vue')['default']
     SmartAnchor: typeof import('./../../hoppscotch-ui/src/components/smart/Anchor.vue')['default']
     SmartAutoComplete: typeof import('./../../hoppscotch-ui/src/components/smart/AutoComplete.vue')['default']
@@ -189,7 +164,6 @@ declare module 'vue' {
     SmartExpand: typeof import('./../../hoppscotch-ui/src/components/smart/Expand.vue')['default']
     SmartFileChip: typeof import('./../../hoppscotch-ui/src/components/smart/FileChip.vue')['default']
     SmartFontSizePicker: typeof import('./components/smart/FontSizePicker.vue')['default']
-    SmartInput: typeof import('./../../hoppscotch-ui/src/components/smart/Input.vue')['default']
     SmartIntersection: typeof import('./../../hoppscotch-ui/src/components/smart/Intersection.vue')['default']
     SmartItem: typeof import('./../../hoppscotch-ui/src/components/smart/Item.vue')['default']
     SmartLink: typeof import('./../../hoppscotch-ui/src/components/smart/Link.vue')['default']
@@ -204,8 +178,8 @@ declare module 'vue' {
     SmartTab: typeof import('./../../hoppscotch-ui/src/components/smart/Tab.vue')['default']
     SmartTabs: typeof import('./../../hoppscotch-ui/src/components/smart/Tabs.vue')['default']
     SmartToggle: typeof import('./../../hoppscotch-ui/src/components/smart/Toggle.vue')['default']
-    SmartTree: typeof import('./../../hoppscotch-ui/src/components/smart/Tree.vue')['default']
+    SmartTree: typeof import('./components/smart/Tree.vue')['default']
-    SmartTreeBranch: typeof import('./../../hoppscotch-ui/src/components/smart/TreeBranch.vue')['default']
+    SmartTreeBranch: typeof import('./components/smart/TreeBranch.vue')['default']
     SmartWindow: typeof import('./../../hoppscotch-ui/src/components/smart/Window.vue')['default']
     SmartWindows: typeof import('./../../hoppscotch-ui/src/components/smart/Windows.vue')['default']
     TabPrimary: typeof import('./components/tab/Primary.vue')['default']
@@ -221,4 +195,5 @@ declare module 'vue' {
     WorkspaceCurrent: typeof import('./components/workspace/Current.vue')['default']
     WorkspaceSelector: typeof import('./components/workspace/Selector.vue')['default']
   }
+
 }

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

@@ -1,57 +1,17 @@
 <template>
   <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
   <AppShare :show="showShare" @hide-modal="showShare = false" />
-  <AppSocial :show="showSocial" @hide-modal="showSocial = false" />
   <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
-
-  <HoppSmartConfirmModal
-    :show="confirmRemove"
-    :title="t('confirm.remove_team')"
-    @hide-modal="confirmRemove = false"
-    @resolve="deleteTeam()"
-  />
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue"
-import { pipe } from "fp-ts/function"
+import { defineActionHandler } from "~/helpers/actions"
-import * as TE from "fp-ts/TaskEither"
-import { deleteTeam as backendDeleteTeam } from "~/helpers/backend/mutations/Team"
-import { defineActionHandler, invokeAction } from "~/helpers/actions"
-import { showChat } from "~/modules/crisp"
-import { useToast } from "~/composables/toast"
-import { useI18n } from "~/composables/i18n"
-
-const toast = useToast()
-const t = useI18n()
 
 const showShortcuts = ref(false)
 const showShare = ref(false)
-const showSocial = ref(false)
 const showLogin = ref(false)
 
-const confirmRemove = ref(false)
-
-const teamID = ref<string | null>(null)
-
-const deleteTeam = () => {
-  if (!teamID.value) return
-  pipe(
-    backendDeleteTeam(teamID.value),
-    TE.match(
-      (err) => {
-        // TODO: Better errors ? We know the possible errors now
-        toast.error(`${t("error.something_went_wrong")}`)
-        console.error(err)
-      },
-      () => {
-        invokeAction("workspace.switch.personal")
-        toast.success(`${t("team.deleted")}`)
-      }
-    )
-  )() // Tasks (and TEs) are lazy, so call the function returned
-}
-
 defineActionHandler("flyouts.keybinds.toggle", () => {
   showShortcuts.value = !showShortcuts.value
 })
@@ -60,20 +20,7 @@ defineActionHandler("modals.share.toggle", () => {
   showShare.value = !showShare.value
 })
 
-defineActionHandler("modals.social.toggle", () => {
-  showSocial.value = !showSocial.value
-})
-
 defineActionHandler("modals.login.toggle", () => {
   showLogin.value = !showLogin.value
 })
-
-defineActionHandler("flyouts.chat.open", () => {
-  showChat()
-})
-
-defineActionHandler("modals.team.delete", ({ teamId }) => {
-  teamID.value = teamId
-  confirmRemove.value = true
-})
 </script>

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

@@ -1,76 +0,0 @@
-<template>
-  <div
-    ref="contextMenuRef"
-    class="fixed bg-popover shadow-lg transform translate-y-8 border border-dividerDark p-2 rounded"
-    :style="`top: ${position.top}px; left: ${position.left}px; z-index: 1000;`"
-  >
-    <div v-if="contextMenuOptions" class="flex flex-col">
-      <div
-        v-for="option in contextMenuOptions"
-        :key="option.id"
-        class="flex flex-col space-y-2"
-      >
-        <HoppSmartItem
-          v-if="option.text.type === 'text' && option.text"
-          :icon="option.icon"
-          :label="option.text.text"
-          @click="handleClick(option)"
-        />
-        <component
-          :is="option.text.component"
-          v-else-if="option.text.type === 'custom'"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { onClickOutside } from "@vueuse/core"
-import { useService } from "dioc/vue"
-import { ref, watch } from "vue"
-import { ContextMenuResult, ContextMenuService } from "~/services/context-menu"
-import { EnvironmentMenuService } from "~/services/context-menu/menu/environment.menu"
-import { ParameterMenuService } from "~/services/context-menu/menu/parameter.menu"
-import { URLMenuService } from "~/services/context-menu/menu/url.menu"
-
-const props = defineProps<{
-  show: boolean
-  position: { top: number; left: number }
-  text: string | null
-}>()
-
-const emit = defineEmits<{
-  (e: "hide-modal"): void
-}>()
-
-const contextMenuRef = ref<any | null>(null)
-
-const contextMenuOptions = ref<ContextMenuResult[]>([])
-
-onClickOutside(contextMenuRef, () => {
-  emit("hide-modal")
-})
-
-const contextMenuService = useService(ContextMenuService)
-
-useService(EnvironmentMenuService)
-useService(ParameterMenuService)
-useService(URLMenuService)
-
-const handleClick = (option: { action: () => void }) => {
-  option.action()
-  emit("hide-modal")
-}
-
-watch(
-  () => [props.show, props.text],
-  (val) => {
-    if (val && props.text) {
-      const options = contextMenuService.getMenuFor(props.text)
-      contextMenuOptions.value = options
-    }
-  },
-  { immediate: true }
-)
-</script>

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/Header.vue

@@ -15,21 +15,16 @@
           :label="t('app.name')"
           to="/"
         />
+        <!-- <AppGitHubStarButton class="mt-1.5 transition" /> -->
       </div>
-      <div class="inline-flex items-center justify-center flex-1 space-x-2">
+      <div class="inline-flex items-center space-x-2">
-        <button
+        <HoppButtonSecondary
-          class="flex flex-1 items-center justify-between px-2 py-1 self-stretch bg-primaryDark transition text-secondaryLight cursor-text rounded border border-dividerDark max-w-60 hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
+          v-tippy="{ theme: 'tooltip', allowHTML: true }"
+          :title="`${t('app.search')} <kbd>/</kbd>`"
+          :icon="IconSearch"
+          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click="invokeAction('modals.search.toggle')"
-        >
+        />
-          <span class="inline-flex flex-1 items-center">
-            <icon-lucide-search class="mr-2 svg-icons" />
-            {{ t("app.search") }}
-          </span>
-          <span class="flex space-x-1">
-            <kbd class="shortcut-key">{{ getPlatformSpecialKey() }}</kbd>
-            <kbd class="shortcut-key">K</kbd>
-          </span>
-        </button>
         <HoppButtonSecondary
           v-if="showInstallButton"
           v-tippy="{ theme: 'tooltip' }"
@@ -47,8 +42,6 @@
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click="invokeAction('modals.support.toggle')"
         />
-      </div>
-      <div class="inline-flex items-center justify-end flex-1 space-x-2">
         <div
           v-if="currentUser === null"
           class="inline-flex items-center space-x-2"
@@ -243,6 +236,7 @@ import IconDownload from "~icons/lucide/download"
 import IconUploadCloud from "~icons/lucide/upload-cloud"
 import IconUserPlus from "~icons/lucide/user-plus"
 import IconLifeBuoy from "~icons/lucide/life-buoy"
+import IconSearch from "~icons/lucide/search"
 import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
 import { pwaDefferedPrompt, installPWA } from "@modules/pwa"
 import { platform } from "~/platform"
@@ -253,11 +247,8 @@ 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"
-import { useToast } from "~/composables/toast"
 
 const t = useI18n()
-const toast = useToast()
 
 /**
  * Once the PWA code is initialized, this holds a method
@@ -374,8 +365,6 @@ const handleTeamEdit = () => {
     editingTeamID.value = workspace.value.teamID
     editingTeamName.value = { name: selectedTeam.value.name }
     displayModalEdit(true)
-  } else {
-    noPermission()
   }
 }
 
@@ -386,19 +375,6 @@ const settings = ref<any | null>(null)
 const logout = ref<any | null>(null)
 const accountActions = ref<any | null>(null)
 
-defineActionHandler("modals.team.edit", handleTeamEdit)
-
-defineActionHandler("modals.team.invite", () => {
-  if (
-    selectedTeam.value?.myRole === "OWNER" ||
-    selectedTeam.value?.myRole === "EDITOR"
-  ) {
-    inviteTeam({ name: selectedTeam.value.name }, selectedTeam.value.id)
-  } else {
-    noPermission()
-  }
-})
-
 defineActionHandler(
   "user.login",
   () => {
@@ -406,8 +382,4 @@ defineActionHandler(
   },
   computed(() => !currentUser.value)
 )
-
-const noPermission = () => {
-  toast.error(`${t("profile.no_permission")}`)
-}
 </script>

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

@@ -1,112 +0,0 @@
-<template>
-  <div v-if="inspectionResults && inspectionResults.length > 0">
-    <tippy interactive trigger="click" theme="popover">
-      <div class="flex justify-center items-center flex-1 flex-col">
-        <HoppButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :icon="IconAlertTriangle"
-          :class="severityColor(getHighestSeverity.severity)"
-          :title="t('inspections.description')"
-        />
-      </div>
-      <template #content="{ hide }">
-        <div class="flex flex-col space-y-2 items-start flex-1">
-          <div
-            class="flex justify-between border rounded pl-2 border-divider bg-popover sticky top-0 self-stretch"
-          >
-            <span class="flex items-center flex-1">
-              <icon-lucide-activity class="mr-2 svg-icons text-accent" />
-              <span class="font-bold">
-                {{ t("inspections.title") }}
-              </span>
-            </span>
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              to="https://docs.hoppscotch.io/documentation/features/inspections"
-              blank
-              :title="t('app.wiki')"
-              :icon="IconHelpCircle"
-            />
-          </div>
-          <div
-            v-for="(inspector, index) in inspectionResults"
-            :key="index"
-            class="flex self-stretch max-w-md w-full"
-          >
-            <div
-              class="flex flex-col flex-1 rounded border border-dashed border-dividerDark divide-y divide-dashed divide-dividerDark"
-            >
-              <span
-                v-if="inspector.text.type === 'text'"
-                class="flex-1 px-3 py-2"
-              >
-                {{ inspector.text.text }}
-                <HoppSmartLink
-                  blank
-                  :to="inspector.doc.link"
-                  class="text-accent hover:text-accentDark transition"
-                >
-                  {{ inspector.doc.text }}
-                  <icon-lucide-arrow-up-right class="svg-icons" />
-                </HoppSmartLink>
-              </span>
-              <span v-if="inspector.action" class="flex p-2 space-x-2">
-                <HoppButtonSecondary
-                  :label="inspector.action.text"
-                  outline
-                  filled
-                  @click="
-                    () => {
-                      inspector.action?.apply()
-                      hide()
-                    }
-                  "
-                />
-              </span>
-            </div>
-          </div>
-        </div>
-      </template>
-    </tippy>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { InspectorResult } from "~/services/inspection"
-import IconAlertTriangle from "~icons/lucide/alert-triangle"
-import IconHelpCircle from "~icons/lucide/help-circle"
-import { computed } from "vue"
-import { useI18n } from "~/composables/i18n"
-
-const t = useI18n()
-
-const props = defineProps<{
-  inspectionResults: InspectorResult[] | undefined
-}>()
-
-const getHighestSeverity = computed(() => {
-  if (props.inspectionResults) {
-    return props.inspectionResults.reduce(
-      (prev, curr) => {
-        return prev.severity > curr.severity ? prev : curr
-      },
-      { severity: 0 }
-    )
-  } else {
-    return { severity: 0 }
-  }
-})
-
-const severityColor = (severity: number) => {
-  switch (severity) {
-    case 1:
-      return "!text-green-500 hover:!text-green-600"
-    case 2:
-      return "!text-yellow-500 hover:!text-yellow-600"
-    case 3:
-      return "!text-red-500 hover:!text-red-600"
-    default:
-      return "!text-gray-500 hover:!text-gray-600"
-  }
-}
-</script>

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

@@ -8,41 +8,91 @@
         {{ t("settings.interceptor_description") }}
       </p>
     </div>
-
+    <HoppSmartRadioGroup
-    <div>
+      v-model="interceptorSelection"
+      :radios="interceptors"
+    />
     <div
-        v-for="interceptor in interceptors"
+      v-if="interceptorSelection == 'EXTENSIONS_ENABLED' && !extensionVersion"
-        :key="interceptor.interceptorID"
+      class="flex space-x-2"
-        class="flex flex-col"
     >
-        <HoppSmartRadio
+      <HoppButtonSecondary
-          :value="interceptor.interceptorID"
+        to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
-          :label="unref(interceptor.name(t))"
+        blank
-          :selected="interceptorSelection === interceptor.interceptorID"
+        :icon="IconChrome"
-          @change="interceptorSelection = interceptor.interceptorID"
+        label="Chrome"
+        outline
+        class="!flex-1"
       />
-
+      <HoppButtonSecondary
-        <component
+        to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
-          :is="interceptor.selectorSubtitle"
+        blank
-          v-if="interceptor.selectorSubtitle"
+        :icon="IconFirefox"
+        label="Firefox"
+        outline
+        class="!flex-1"
       />
     </div>
   </div>
-  </div>
 </template>
 
 <script setup lang="ts">
+import IconChrome from "~icons/brands/chrome"
+import IconFirefox from "~icons/brands/firefox"
+import { computed } from "vue"
+import { applySetting, toggleSetting } from "~/newstore/settings"
+import { useSetting } from "@composables/settings"
 import { useI18n } from "@composables/i18n"
-import { useService } from "dioc/vue"
+import { useReadonlyStream } from "@composables/stream"
-import { Ref, unref } from "vue"
+import { extensionStatus$ } from "~/newstore/HoppExtension"
-import { InterceptorService } from "~/services/interceptor.service"
 
 const t = useI18n()
 
-const interceptorService = useService(InterceptorService)
+const PROXY_ENABLED = useSetting("PROXY_ENABLED")
+const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")
 
-const interceptorSelection =
+const currentExtensionStatus = useReadonlyStream(extensionStatus$, null)
-  interceptorService.currentInterceptorID as Ref<string>
 
-const interceptors = interceptorService.availableInterceptors
+const extensionVersion = computed(() => {
+  return currentExtensionStatus.value === "available"
+    ? window.__POSTWOMAN_EXTENSION_HOOK__?.getVersion() ?? null
+    : null
+})
+
+const interceptors = computed(() => [
+  { value: "BROWSER_ENABLED" as const, label: t("state.none") },
+  { value: "PROXY_ENABLED" as const, label: t("settings.proxy") },
+  {
+    value: "EXTENSIONS_ENABLED" as const,
+    label:
+      `${t("settings.extensions")}: ` +
+      (extensionVersion.value !== null
+        ? `v${extensionVersion.value.major}.${extensionVersion.value.minor}`
+        : t("settings.extension_ver_not_reported")),
+  },
+])
+
+type InterceptorMode = (typeof interceptors)["value"][number]["value"]
+
+const interceptorSelection = computed<InterceptorMode>({
+  get() {
+    if (PROXY_ENABLED.value) return "PROXY_ENABLED"
+    if (EXTENSIONS_ENABLED.value) return "EXTENSIONS_ENABLED"
+    return "BROWSER_ENABLED"
+  },
+  set(val) {
+    if (val === "EXTENSIONS_ENABLED") {
+      applySetting("EXTENSIONS_ENABLED", true)
+      if (PROXY_ENABLED.value) toggleSetting("PROXY_ENABLED")
+    }
+    if (val === "PROXY_ENABLED") {
+      applySetting("PROXY_ENABLED", true)
+      if (EXTENSIONS_ENABLED.value) toggleSetting("EXTENSIONS_ENABLED")
+    }
+    if (val === "BROWSER_ENABLED") {
+      applySetting("PROXY_ENABLED", false)
+      applySetting("EXTENSIONS_ENABLED", false)
+    }
+  },
+})
 </script>

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

@@ -130,12 +130,13 @@
           @click="nativeShare()"
         />
       </div>
+      <AppShare :show="showShare" @hide-modal="showShare = false" />
     </template>
   </HoppSmartModal>
 </template>
 
 <script setup lang="ts">
-import { watch } from "vue"
+import { ref, watch } from "vue"
 import IconSidebar from "~icons/lucide/sidebar"
 import IconSidebarOpen from "~icons/lucide/sidebar-open"
 import IconBook from "~icons/lucide/book"
@@ -150,12 +151,13 @@ import IconUserPlus from "~icons/lucide/user-plus"
 import IconShare2 from "~icons/lucide/share-2"
 import IconChevronRight from "~icons/lucide/chevron-right"
 import { useSetting } from "@composables/settings"
-import { invokeAction } from "~/helpers/actions"
+import { defineActionHandler } from "~/helpers/actions"
 import { showChat } from "@modules/crisp"
 import { useI18n } from "@composables/i18n"
 
 const t = useI18n()
 const navigatorShare = !!navigator.share
+const showShare = ref(false)
 
 const ZEN_MODE = useSetting("ZEN_MODE")
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
@@ -172,6 +174,10 @@ defineProps<{
   show: boolean
 }>()
 
+defineActionHandler("modals.share.toggle", () => {
+  showShare.value = !showShare.value
+})
+
 const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
@@ -192,7 +198,7 @@ const expandCollection = () => {
 }
 
 const expandInvite = () => {
-  invokeAction("modals.share.toggle")
+  showShare.value = true
 }
 
 const nativeShare = () => {

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

@@ -18,18 +18,13 @@
         :horizontal="COLUMN_LAYOUT"
         @resize="setPaneEvent($event, 'horizontal')"
       >
-        <Pane
+        <Pane :size="PANE_MAIN_TOP_SIZE" class="flex flex-col !overflow-auto">
-          :size="PANE_MAIN_TOP_SIZE"
-          class="flex flex-col !overflow-auto"
-          min-size="25"
-        >
           <slot name="primary" />
         </Pane>
         <Pane
           v-if="hasSecondary"
           :size="PANE_MAIN_BOTTOM_SIZE"
           class="flex flex-col !overflow-auto"
-          min-size="25"
         >
           <slot name="secondary" />
         </Pane>
@@ -38,7 +33,7 @@
     <Pane
       v-if="SIDEBAR && hasSidebar"
       :size="PANE_SIDEBAR_SIZE"
-      min-size="25"
+      min-size="20"
       class="flex flex-col !overflow-auto bg-primaryContrast"
     >
       <slot name="sidebar" />
@@ -83,10 +78,10 @@ type PaneEvent = {
   size: number
 }
 
-const PANE_MAIN_SIZE = ref(70)
+const PANE_MAIN_SIZE = ref(74)
-const PANE_SIDEBAR_SIZE = ref(30)
+const PANE_SIDEBAR_SIZE = ref(26)
-const PANE_MAIN_TOP_SIZE = ref(35)
+const PANE_MAIN_TOP_SIZE = ref(42)
-const PANE_MAIN_BOTTOM_SIZE = ref(65)
+const PANE_MAIN_BOTTOM_SIZE = ref(58)
 
 if (!COLUMN_LAYOUT.value) {
   PANE_MAIN_TOP_SIZE.value = 50

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

@@ -4,22 +4,24 @@
       <div
         class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
       >
-        <HoppSmartInput
+        <div class="flex flex-col px-6 py-4 border-b border-dividerLight">
+          <input
             v-model="filterText"
             type="search"
-          styles="px-6 py-4 border-b border-dividerLight"
+            autocomplete="off"
+            class="flex px-4 py-2 border rounded bg-primaryContrast border-divider hover:border-dividerDark focus-visible:border-dividerDark"
             :placeholder="`${t('action.search')}`"
-          input-styles="flex px-4 py-2 border rounded bg-primaryContrast border-divider hover:border-dividerDark focus-visible:border-dividerDark"
           />
         </div>
+      </div>
       <div class="flex flex-col divide-y divide-dividerLight">
-        <HoppSmartPlaceholder
+        <HoppSmartPlaceholder v-if="isEmpty(shortcutsResults)">
-          v-if="isEmpty(shortcutsResults)"
-          :text="`${t('state.nothing_found')} ‟${filterText}”`"
-        >
           <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+          <span class="my-2 text-center flex flex-col">
+            {{ t("state.nothing_found") }}
+            <span class="break-all">"{{ filterText }}"</span>
+          </span>
         </HoppSmartPlaceholder>
-
         <details
           v-for="(sectionResults, sectionTitle) in shortcutsResults"
           v-else

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col items-center justify-center text-secondaryLight">
-    <div class="flex mb-4 space-x-2">
+    <div class="flex pb-4 my-4 space-x-2">
       <div class="flex flex-col items-end space-y-4 text-right">
         <span class="flex items-center flex-1">
           {{ t("shortcut.request.send_request") }}
@@ -22,11 +22,10 @@
         </div>
         <div class="flex">
           <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-          <kbd class="shortcut-key">/</kbd>
+          <kbd class="shortcut-key">K</kbd>
         </div>
         <div class="flex">
-          <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
+          <kbd class="shortcut-key">/</kbd>
-          <kbd class="shortcut-key">K</kbd>
         </div>
         <div class="flex">
           <kbd class="shortcut-key">?</kbd>

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

@@ -1,135 +0,0 @@
-<template>
-  <HoppSmartModal
-    v-if="show"
-    dialog
-    :title="t('app.social_links')"
-    @close="hideModal"
-  >
-    <template #body>
-      <div class="flex flex-col space-y-2">
-        <div class="grid grid-cols-3 gap-4">
-          <a
-            v-for="(platform, index) in platforms"
-            :key="`platform-${index}`"
-            :href="platform.link"
-            target="_blank"
-            class="social-link"
-            tabindex="0"
-          >
-            <component :is="platform.icon" class="w-6 h-6" />
-            <span class="mt-3">
-              {{ platform.name }}
-            </span>
-          </a>
-          <button class="social-link" @click="copyAppLink">
-            <component :is="copyIcon" class="w-6 h-6 text-xl" />
-            <span class="mt-3">
-              {{ t("app.copy") }}
-            </span>
-          </button>
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <p class="text-secondaryLight">
-        {{ t("app.social_description") }}
-      </p>
-    </template>
-  </HoppSmartModal>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from "@composables/i18n"
-import { useToast } from "@composables/toast"
-import { refAutoReset } from "@vueuse/core"
-import { copyToClipboard } from "~/helpers/utils/clipboard"
-import IconFacebook from "~icons/brands/facebook"
-import IconLinkedIn from "~icons/brands/linkedin"
-import IconReddit from "~icons/brands/reddit"
-import IconTwitter from "~icons/brands/twitter"
-import IconCheck from "~icons/lucide/check"
-import IconCopy from "~icons/lucide/copy"
-import IconGitHub from "~icons/lucide/github"
-
-const t = useI18n()
-
-const toast = useToast()
-
-defineProps<{
-  show: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: "hide-modal"): void
-}>()
-
-const url = "https://hoppscotch.io"
-
-const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
-  IconCopy,
-  1000
-)
-
-const platforms = [
-  {
-    name: "GitHub",
-    icon: IconGitHub,
-    link: `https://hoppscotch.io/github`,
-  },
-  {
-    name: "Twitter",
-    icon: IconTwitter,
-    link: `https://twitter.com/hoppscotch_io`,
-  },
-  {
-    name: "Facebook",
-    icon: IconFacebook,
-    link: `https://www.facebook.com/hoppscotch.io`,
-  },
-  {
-    name: "Reddit",
-    icon: IconReddit,
-    link: `https://www.reddit.com/r/hoppscotch`,
-  },
-  {
-    name: "LinkedIn",
-    icon: IconLinkedIn,
-    link: `https://www.linkedin.com/company/hoppscotch/`,
-  },
-]
-
-const copyAppLink = () => {
-  copyToClipboard(url)
-  copyIcon.value = IconCheck
-  toast.success(`${t("state.copied_to_clipboard")}`)
-}
-
-const hideModal = () => {
-  emit("hide-modal")
-}
-</script>
-
-<style lang="scss" scoped>
-.social-link {
-  @apply border border-dividerLight;
-  @apply rounded;
-  @apply flex-col flex;
-  @apply p-4;
-  @apply items-center;
-  @apply justify-center;
-  @apply font-semibold;
-  @apply hover: (bg-primaryLight text-secondaryDark);
-  @apply focus: outline-none;
-  @apply focus-visible: border-divider;
-
-  svg {
-    @apply opacity-80;
-  }
-
-  &:hover {
-    svg {
-      @apply opacity-100;
-    }
-  }
-}
-</style>

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

@@ -1,49 +1,48 @@
 <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="flex items-center flex-1 px-6 py-3 font-medium transition cursor-pointer search-entry focus:outline-none"
-    :class="{ 'active bg-primaryLight text-secondaryDark': active }"
+    :class="{ active: active }"
     tabindex="-1"
     @click="emit('action')"
     @keydown.enter="emit('action')"
   >
     <component
       :is="entry.icon"
-      class="opacity-50 svg-icons"
+      class="mr-4 transition opacity-50 svg-icons"
-      :class="{ 'opacity-100': active }"
+      :class="{ 'opacity-100 text-secondaryDark': active }"
     />
-    <template
+    <span
       v-if="entry.text.type === 'text' && typeof entry.text.text === 'string'"
+      class="flex flex-1 mr-4 transition"
+      :class="{ 'text-secondaryDark': active }"
     >
-      <span class="block truncate">
       {{ entry.text.text }}
     </span>
-    </template>
+    <span
-    <template
       v-else-if="entry.text.type === 'text' && Array.isArray(entry.text.text)"
+      class="flex flex-1 mr-4 transition"
+      :class="{ 'text-secondaryDark': active }"
     >
-      <template
+      <span
         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"
+          class="inline"
         />
-      </template>
+      </span>
-    </template>
+    </span>
-    <template v-else-if="entry.text.type === 'custom'">
+    <span 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">
-    <span v-if="formattedShortcutKeys" class="block truncate">
       <kbd
         v-for="(key, keyIndex) in formattedShortcutKeys"
         :key="`key-${String(keyIndex)}`"
@@ -80,8 +79,7 @@ const props = defineProps<{
   active: boolean
 }>()
 
-const formattedShortcutKeys = computed(
+const formattedShortcutKeys = computed(() =>
-  () =>
   props.entry.meta?.keyboardShortcut?.map((key) => {
     return SPECIAL_KEY_CHARS[key] ?? capitalize(key)
   })
@@ -107,6 +105,7 @@ watch(
 
 <style lang="scss" scoped>
 .search-entry {
+  @apply relative;
   @apply after:absolute;
   @apply after:top-0;
   @apply after:left-0;
@@ -117,6 +116,7 @@ watch(
   @apply after:content-DEFAULT;
 
   &.active {
+    @apply bg-primaryLight;
     @apply after:bg-accentLight;
   }
 }

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/GQLRequest.vue

@@ -1,65 +0,0 @@
-<template>
-  <span class="flex flex-1 space-x-2 items-center">
-    <template v-for="(folder, index) in pathFolders" :key="index">
-      <span class="block" :class="{ truncate: index !== 0 }">
-        {{ folder.name }}
-      </span>
-      <icon-lucide-chevron-right class="flex flex-shrink-0" />
-    </template>
-    <span v-if="request" class="block">
-      {{ request.name }}
-    </span>
-  </span>
-</template>
-
-<script setup lang="ts">
-import { HoppCollection, HoppGQLRequest } from "@hoppscotch/data"
-import { computed } from "vue"
-import { graphqlCollectionStore } from "~/newstore/collections"
-
-const props = defineProps<{
-  folderPath: string
-}>()
-
-const pathFolders = computed(() => {
-  try {
-    const folderIndicies = props.folderPath
-      .split("/")
-      .slice(0, -1)
-      .map((x) => parseInt(x))
-
-    const pathItems: HoppCollection<HoppGQLRequest>[] = []
-
-    let currentFolder =
-      graphqlCollectionStore.value.state[folderIndicies.shift()!]
-
-    pathItems.push(currentFolder)
-
-    while (folderIndicies.length > 0) {
-      const folderIndex = folderIndicies.shift()!
-
-      const folder = currentFolder.folders[folderIndex]
-      pathItems.push(folder)
-
-      currentFolder = folder
-    }
-
-    return pathItems
-  } catch (e) {
-    console.error(e)
-    return []
-  }
-})
-
-const request = computed(() => {
-  try {
-    const requestIndex = parseInt(props.folderPath.split("/").at(-1)!)
-
-    return pathFolders.value[pathFolders.value.length - 1].requests[
-      requestIndex
-    ]
-  } catch (e) {
-    return null
-  }
-})
-</script>

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

@@ -1,16 +1,13 @@
 <template>
-  <span class="flex flex-1 items-center space-x-2">
+  <span class="flex flex-row space-x-2">
-    <span class="block truncate">
+    <span>{{ dateTimeText }}</span>
-      {{ dateTimeText }}
+    <icon-lucide-chevron-right class="inline" />
-    </span>
+    <span class="truncate" :class="entryStatus.className">
-    <icon-lucide-chevron-right class="flex flex-shrink-0" />
+      <span class="font-semibold truncate text-tiny">
-    <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">
+    </span>
+    <span>
       {{ historyEntry.request.endpoint }}
     </span>
   </span>

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

@@ -1,71 +0,0 @@
-<template>
-  <span class="flex flex-1 items-center space-x-2">
-    <template v-for="(folder, index) in pathFolders" :key="index">
-      <span class="block" :class="{ truncate: index !== 0 }">
-        {{ folder.name }}
-      </span>
-      <icon-lucide-chevron-right class="flex flex-shrink-0" />
-    </template>
-    <span
-      v-if="request"
-      class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
-      :class="getMethodLabelColorClassOf(request)"
-    >
-      {{ request.method.toUpperCase() }}
-    </span>
-    <span v-if="request" class="block">
-      {{ request.name }}
-    </span>
-  </span>
-</template>
-
-<script setup lang="ts">
-import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
-import { computed } from "vue"
-import { restCollectionStore } from "~/newstore/collections"
-import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
-
-const props = defineProps<{
-  folderPath: string
-}>()
-
-const pathFolders = computed(() => {
-  try {
-    const folderIndicies = props.folderPath
-      .split("/")
-      .slice(0, -1)
-      .map((x) => parseInt(x))
-
-    const pathItems: HoppCollection<HoppRESTRequest>[] = []
-
-    let currentFolder = restCollectionStore.value.state[folderIndicies.shift()!]
-    pathItems.push(currentFolder)
-
-    while (folderIndicies.length > 0) {
-      const folderIndex = folderIndicies.shift()!
-
-      const folder = currentFolder.folders[folderIndex]
-      pathItems.push(folder)
-
-      currentFolder = folder
-    }
-
-    return pathItems
-  } catch (e) {
-    console.error(e)
-    return []
-  }
-})
-
-const request = computed(() => {
-  try {
-    const requestIndex = parseInt(props.folderPath.split("/").at(-1)!)
-
-    return pathFolders.value[pathFolders.value.length - 1].requests[
-      requestIndex
-    ]
-  } catch (e) {
-    return null
-  }
-})
-</script>

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

@@ -6,8 +6,8 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <div class="flex flex-col border-b transition border-divider">
+      <div class="flex flex-col border-b transition border-dividerLight">
-        <div class="flex items-center">
+        <div class="flex items-center p-6 space-x-2">
           <input
             id="command"
             v-model="search"
@@ -16,55 +16,21 @@
             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"
+            class="flex flex-1 text-base bg-transparent text-secondaryDark"
           />
-          <HoppSmartSpinner v-if="searchSession?.loading" class="mr-6" />
+
-        </div>
+          <icon-lucide-refresh-cw
-      </div>
+            v-if="searchSession?.loading"
-      <div
+            class="animate-spin"
-        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"
+          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="mx-2 truncate">
+            <span class="ml-2 truncate">
               {{ t("action.to_navigate") }}
             </span>
             <kbd class="shortcut-key">↩</kbd>
@@ -79,6 +45,37 @@
             </span>
           </div>
         </div>
+      </div>
+      <div
+        v-if="searchSession"
+        class="flex flex-col flex-1 overflow-auto space-y-4 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 my-2 text-secondaryLight">
+            {{ 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>
+      </div>
+      <HoppSmartPlaceholder
+        v-if="scoredResults.length === 0 && search.length > 0"
+        :text="`${t('state.nothing_found')} ‟${search}”`"
+      >
+        <template #icon>
+          <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+        </template>
+      </HoppSmartPlaceholder>
     </template>
   </HoppSmartModal>
 </template>
@@ -95,22 +92,6 @@ import {
 import { isEqual } from "lodash-es"
 import { HistorySpotlightSearcherService } from "~/services/spotlight/searchers/history.searcher"
 import { UserSpotlightSearcherService } from "~/services/spotlight/searchers/user.searcher"
-import { NavigationSpotlightSearcherService } from "~/services/spotlight/searchers/navigation.searcher"
-import { SettingsSpotlightSearcherService } from "~/services/spotlight/searchers/settings.searcher"
-import { CollectionsSpotlightSearcherService } from "~/services/spotlight/searchers/collections.searcher"
-import { MiscellaneousSpotlightSearcherService } from "~/services/spotlight/searchers/miscellaneous.searcher"
-import { TabSpotlightSearcherService } from "~/services/spotlight/searchers/tab.searcher"
-import { GeneralSpotlightSearcherService } from "~/services/spotlight/searchers/general.searcher"
-import { ResponseSpotlightSearcherService } from "~/services/spotlight/searchers/response.searcher"
-import { RequestSpotlightSearcherService } from "~/services/spotlight/searchers/request.searcher"
-import {
-  EnvironmentsSpotlightSearcherService,
-  SwitchEnvSpotlightSearcherService,
-} from "~/services/spotlight/searchers/environment.searcher"
-import {
-  SwitchWorkspaceSpotlightSearcherService,
-  WorkspaceSpotlightSearcherService,
-} from "~/services/spotlight/searchers/workspace.searcher"
 
 const t = useI18n()
 
@@ -126,18 +107,6 @@ const spotlightService = useService(SpotlightService)
 
 useService(HistorySpotlightSearcherService)
 useService(UserSpotlightSearcherService)
-useService(NavigationSpotlightSearcherService)
-useService(SettingsSpotlightSearcherService)
-useService(CollectionsSpotlightSearcherService)
-useService(MiscellaneousSpotlightSearcherService)
-useService(TabSpotlightSearcherService)
-useService(GeneralSpotlightSearcherService)
-useService(ResponseSpotlightSearcherService)
-useService(RequestSpotlightSearcherService)
-useService(EnvironmentsSpotlightSearcherService)
-useService(SwitchEnvSpotlightSearcherService)
-useService(WorkspaceSpotlightSearcherService)
-useService(SwitchWorkspaceSpotlightSearcherService)
 
 const search = ref("")
 
@@ -220,17 +189,6 @@ function newUseArrowKeysForNavigation() {
     }
   }
 
-  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()
@@ -246,7 +204,11 @@ function newUseArrowKeysForNavigation() {
       e.preventDefault()
       e.stopPropagation()
 
-      onEnter()
+      const [sectionIndex, entryIndex] = selectedEntry.value
+      const [sectionID, section] = scoredResults.value[sectionIndex]
+      const result = section.results[entryIndex]
+
+      runAction(sectionID, result)
     }
   }
 
@@ -264,4 +226,3 @@ function newUseArrowKeysForNavigation() {
   return { selectedEntry }
 }
 </script>
-~/services/spotlight/searchers/workspace.searcher

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

@@ -6,13 +6,21 @@
     @close="hideModal"
   >
     <template #body>
-      <HoppSmartInput
+      <div class="flex flex-col">
-        v-model="editingName"
+        <input
+          id="selectLabelAdd"
+          v-model="name"
+          v-focus
+          class="input floating-input"
           placeholder=" "
-        :label="t('action.label')"
+          type="text"
-        input-styles="floating-input"
+          autocomplete="off"
-        @submit="addNewCollection"
+          @keyup.enter="addNewCollection"
         />
+        <label for="selectLabelAdd">
+          {{ t("action.label") }}
+        </label>
+      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -57,28 +65,28 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const editingName = ref("")
+const name = ref("")
 
 watch(
   () => props.show,
   (show) => {
     if (!show) {
-      editingName.value = ""
+      name.value = ""
     }
   }
 )
 
 const addNewCollection = () => {
-  if (!editingName.value) {
+  if (!name.value) {
     toast.error(t("collection.invalid_name"))
     return
   }
 
-  emit("submit", editingName.value)
+  emit("submit", name.value)
 }
 
 const hideModal = () => {
-  editingName.value = ""
+  name.value = ""
   emit("hide-modal")
 }
 </script>

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

@@ -6,13 +6,21 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <HoppSmartInput
+      <div class="flex flex-col">
-        v-model="editingName"
+        <input
+          id="selectLabelAddFolder"
+          v-model="name"
+          v-focus
+          class="input floating-input"
           placeholder=" "
-        input-styles="floating-input"
+          type="text"
-        :label="t('action.label')"
+          autocomplete="off"
-        @submit="addFolder"
+          @keyup.enter="addFolder"
         />
+        <label for="selectLabelAddFolder">
+          {{ t("action.label") }}
+        </label>
+      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -57,27 +65,27 @@ const emit = defineEmits<{
   (e: "add-folder", name: string): void
 }>()
 
-const editingName = ref("")
+const name = ref("")
 
 watch(
   () => props.show,
   (show) => {
     if (!show) {
-      editingName.value = ""
+      name.value = ""
     }
   }
 )
 
 const addFolder = () => {
-  if (editingName.value.trim() === "") {
+  if (name.value.trim() === "") {
     toast.error(t("folder.invalid_name"))
     return
   }
-  emit("add-folder", editingName.value)
+  emit("add-folder", name.value)
 }
 
 const hideModal = () => {
-  editingName.value = ""
+  name.value = ""
   emit("hide-modal")
 }
 </script>

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

@@ -6,13 +6,19 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <HoppSmartInput
+      <div class="flex flex-col">
-        v-model="editingName"
+        <input
+          id="selectLabelAddRequest"
+          v-model="name"
+          v-focus
+          class="input floating-input"
           placeholder=" "
-        :label="t('action.label')"
+          type="text"
-        input-styles="floating-input"
+          autocomplete="off"
-        @submit="addRequest"
+          @keyup.enter="addRequest"
         />
+        <label for="selectLabelAddRequest">{{ t("action.label") }}</label>
+      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -58,23 +64,23 @@ const emit = defineEmits<{
   (event: "add-request", name: string): void
 }>()
 
-const editingName = ref("")
+const name = ref("")
 
 watch(
   () => props.show,
   (show) => {
     if (show) {
-      editingName.value = currentActiveTab.value.document.request.name
+      name.value = currentActiveTab.value.document.request.name
     }
   }
 )
 
 const addRequest = () => {
-  if (editingName.value.trim() === "") {
+  if (name.value.trim() === "") {
     toast.error(`${t("error.empty_req_name")}`)
     return
   }
-  emit("add-request", editingName.value)
+  emit("add-request", name.value)
 }
 
 const hideModal = () => {

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

@@ -193,7 +193,7 @@ import IconTrash2 from "~icons/lucide/trash-2"
 import IconEdit from "~icons/lucide/edit"
 import IconFolder from "~icons/lucide/folder"
 import IconFolderOpen from "~icons/lucide/folder-open"
-import { ref, computed, watch } from "vue"
+import { PropType, ref, computed, watch } from "vue"
 import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
 import { useI18n } from "@composables/i18n"
 import { TippyComponent } from "vue-tippy"
@@ -209,36 +209,67 @@ type FolderType = "collection" | "folder"
 
 const t = useI18n()
 
-const props = withDefaults(
+const props = defineProps({
-  defineProps<{
+  id: {
-    id: string
+    type: String,
-    parentID?: string | null
+    default: "",
-    data: HoppCollection<HoppRESTRequest> | TeamCollection
+    required: true,
+  },
+  parentID: {
+    type: String as PropType<string | null>,
+    default: null,
+    required: false,
+  },
+  data: {
+    type: Object as PropType<HoppCollection<HoppRESTRequest> | TeamCollection>,
+    default: () => ({}),
+    required: true,
+  },
+  collectionsType: {
+    type: String as PropType<CollectionType>,
+    default: "my-collections",
+    required: true,
+  },
   /**
    * Collection component can be used for both collections and folders.
    * folderType is used to determine which one it is.
    */
-    collectionsType: CollectionType
+  folderType: {
-    folderType: FolderType
+    type: String as PropType<FolderType>,
-    isOpen: boolean
+    default: "collection",
-    isSelected?: boolean | null
+    required: true,
-    exportLoading?: boolean
+  },
-    hasNoTeamAccess?: boolean
+  isOpen: {
-    collectionMoveLoading?: string[]
+    type: Boolean,
-    isLastItem?: boolean
+    default: false,
-  }>(),
+    required: true,
-  {
+  },
-    id: "",
+  isSelected: {
-    parentID: null,
+    type: Boolean as PropType<boolean | null>,
-    collectionsType: "my-collections",
+    default: false,
-    folderType: "collection",
+    required: false,
-    isOpen: false,
+  },
-    isSelected: false,
+  exportLoading: {
-    exportLoading: false,
+    type: Boolean,
-    hasNoTeamAccess: false,
+    default: false,
-    isLastItem: false,
+    required: false,
-  }
+  },
-)
+  hasNoTeamAccess: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+  collectionMoveLoading: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+    required: false,
+  },
+  isLastItem: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+})
 
 const emit = defineEmits<{
   (event: "toggle-children"): void
@@ -417,13 +448,8 @@ const notSameDestination = computed(() => {
 })
 
 const isCollLoading = computed(() => {
-  const { collectionMoveLoading } = props
+  if (props.collectionMoveLoading.length > 0 && props.data.id) {
-  if (
+    return props.collectionMoveLoading.includes(props.data.id)
-    collectionMoveLoading &&
-    collectionMoveLoading.length > 0 &&
-    props.data.id
-  ) {
-    return collectionMoveLoading.includes(props.data.id)
   } else {
     return false
   }

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

@@ -6,13 +6,21 @@
     @close="hideModal"
   >
     <template #body>
-      <HoppSmartInput
+      <div class="flex flex-col">
-        v-model="editingName"
+        <input
+          id="selectLabelEdit"
+          v-model="name"
+          v-focus
+          class="input floating-input"
           placeholder=" "
-        input-styles="floating-input"
+          type="text"
-        :label="t('action.label')"
+          autocomplete="off"
-        @submit="saveCollection"
+          @keyup.enter="saveCollection"
         />
+        <label for="selectLabelEdit">
+          {{ t("action.label") }}
+        </label>
+      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -59,26 +67,26 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const editingName = ref("")
+const name = ref("")
 
 watch(
   () => props.editingCollectionName,
   (newName) => {
-    editingName.value = newName
+    name.value = newName
   }
 )
 
 const saveCollection = () => {
-  if (editingName.value.trim() === "") {
+  if (name.value.trim() === "") {
     toast.error(t("collection.invalid_name"))
     return
   }
 
-  emit("submit", editingName.value)
+  emit("submit", name.value)
 }
 
 const hideModal = () => {
-  editingName.value = ""
+  name.value = ""
   emit("hide-modal")
 }
 </script>

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

@@ -6,13 +6,21 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <HoppSmartInput
+      <div class="flex flex-col">
-        v-model="editingName"
+        <input
+          id="selectLabelEditFolder"
+          v-model="name"
+          v-focus
+          class="input floating-input"
           placeholder=" "
-        :label="t('action.label')"
+          type="text"
-        input-styles="floating-input"
+          autocomplete="off"
-        @submit="editFolder"
+          @keyup.enter="editFolder"
         />
+        <label for="selectLabelEditFolder">
+          {{ t("action.label") }}
+        </label>
+      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -59,26 +67,26 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const editingName = ref("")
+const name = ref("")
 
 watch(
   () => props.editingFolderName,
   (newName) => {
-    editingName.value = newName
+    name.value = newName
   }
 )
 
 const editFolder = () => {
-  if (editingName.value.trim() === "") {
+  if (name.value.trim() === "") {
     toast.error(t("folder.invalid_name"))
     return
   }
 
-  emit("submit", editingName.value)
+  emit("submit", name.value)
 }
 
 const hideModal = () => {
-  editingName.value = ""
+  name.value = ""
   emit("hide-modal")
 }
 </script>

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

@@ -6,13 +6,21 @@
     @close="hideModal"
   >
     <template #body>
-      <HoppSmartInput
+      <div class="flex flex-col">
-        v-model="editingName"
+        <input
+          id="selectLabelEditReq"
+          v-model="name"
+          v-focus
+          class="input floating-input"
           placeholder=" "
-        :label="t('action.label')"
+          type="text"
-        input-styles="floating-input"
+          autocomplete="off"
-        @submit="editRequest"
+          @keyup.enter="editRequest"
         />
+        <label for="selectLabelEditReq">
+          {{ t("action.label") }}
+        </label>
+      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -60,19 +68,19 @@ const emit = defineEmits<{
   (e: "update:modelValue", value: string): void
 }>()
 
-const editingName = useVModel(props, "modelValue")
+const name = useVModel(props, "modelValue")
 
 const editRequest = () => {
-  if (editingName.value.trim() === "") {
+  if (name.value.trim() === "") {
     toast.error(t("request.invalid_name"))
     return
   }
 
-  emit("submit", editingName.value)
+  emit("submit", name.value)
 }
 
 const hideModal = () => {
-  editingName.value = ""
+  name.value = ""
   emit("hide-modal")
 }
 </script>

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

@@ -32,7 +32,7 @@
       </span>
     </div>
     <div class="flex flex-col flex-1">
-      <HoppSmartTree :adapter="myAdapter">
+      <SmartTree :adapter="myAdapter">
         <template
           #content="{ node, toggleChildren, isOpen, highlightChildren }"
         >
@@ -291,7 +291,7 @@
           >
           </HoppSmartPlaceholder>
         </template>
-      </HoppSmartTree>
+      </SmartTree>
     </div>
   </div>
 </template>
@@ -303,10 +303,7 @@ import IconHelpCircle from "~icons/lucide/help-circle"
 import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
 import { computed, PropType, Ref, toRef } from "vue"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
-import {
+import { ChildrenResult, SmartTreeAdapter } from "~/helpers/treeAdapter"
-  ChildrenResult,
-  SmartTreeAdapter,
-} from "@hoppscotch/ui/dist/helpers/treeAdapter"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { pipe } from "fp-ts/function"

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

@@ -8,15 +8,21 @@
   >
     <template #body>
       <div class="flex flex-col">
-        <HoppSmartInput
+        <div class="relative flex">
+          <input
+            id="selectLabelSaveReq"
             v-model="requestName"
-          styles="relative flex"
+            v-focus
+            class="input floating-input"
             placeholder=" "
-          :label="t('request.name')"
+            type="text"
-          input-styles="floating-input"
+            autocomplete="off"
-          @submit="saveRequestAs"
+            @keyup.enter="saveRequestAs"
           />
-
+          <label for="selectLabelSaveReq">
+            {{ t("request.name") }}
+          </label>
+        </div>
         <label class="p-4">
           {{ t("collection.select_location") }}
         </label>
@@ -56,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, reactive, ref, watch } from "vue"
+import { nextTick, reactive, ref, watch } from "vue"
 import { cloneDeep } from "lodash-es"
 import {
   HoppGQLRequest,
@@ -71,6 +77,7 @@ import {
   updateTeamRequest,
 } from "~/helpers/backend/mutations/TeamRequest"
 import { Picked } from "~/helpers/types/HoppPicked"
+import { getGQLSession, useGQLRequestName } from "~/newstore/GQLSession"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import {
@@ -81,9 +88,8 @@ import {
 } from "~/newstore/collections"
 import { GQLError } from "~/helpers/backend/GQLClient"
 import { computedWithControl } from "@vueuse/core"
+import { currentActiveTab } from "~/helpers/rest/tab"
 import { platform } from "~/platform"
-import { currentActiveTab as activeRESTTab } from "~/helpers/rest/tab"
-import { currentActiveTab as activeGQLTab } from "~/helpers/graphql/tab"
 
 const t = useI18n()
 const toast = useToast()
@@ -101,12 +107,10 @@ const props = withDefaults(
   defineProps<{
     show: boolean
     mode: "rest" | "graphql"
-    request?: HoppRESTRequest | HoppGQLRequest | null
   }>(),
   {
     show: false,
     mode: "rest",
-    request: null,
   }
 )
 
@@ -122,36 +126,22 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const gqlRequestName = computedWithControl(
+const gqlRequestName = useGQLRequestName()
-  () => activeGQLTab.value,
-  () => activeGQLTab.value.document.request.name
-)
-
 const restRequestName = computedWithControl(
-  () => activeRESTTab.value,
+  () => currentActiveTab.value,
-  () => activeRESTTab.value.document.request.name
+  () => currentActiveTab.value.document.request.name
 )
 
-const reqName = computed(() => {
+const requestName = ref(
-  if (props.request) {
+  props.mode === "rest" ? restRequestName.value : gqlRequestName.value
-    return props.request.name
+)
-  } else if (props.mode === "rest") {
-    return restRequestName.value
-  } else {
-    return gqlRequestName.value
-  }
-})
-
-const requestName = ref(reqName.value)
 
 watch(
-  () => [activeRESTTab.value, activeGQLTab.value],
+  () => [currentActiveTab.value, gqlRequestName.value],
   () => {
     if (props.mode === "rest") {
-      requestName.value = activeRESTTab.value?.document.request.name ?? ""
+      requestName.value = currentActiveTab.value?.document.request.name ?? ""
-    } else {
+    } else requestName.value = gqlRequestName.value
-      requestName.value = activeGQLTab.value?.document.request.name ?? ""
-    }
   }
 )
 
@@ -210,8 +200,8 @@ const saveRequestAs = async () => {
 
   const requestUpdated =
     props.mode === "rest"
-      ? cloneDeep(activeRESTTab.value.document.request)
+      ? cloneDeep(currentActiveTab.value.document.request)
-      : cloneDeep(activeGQLTab.value.document.request)
+      : cloneDeep(getGQLSession().request)
 
   requestUpdated.name = requestName.value
 
@@ -224,7 +214,7 @@ const saveRequestAs = async () => {
       requestUpdated
     )
 
-    activeRESTTab.value.document = {
+    currentActiveTab.value.document = {
       request: requestUpdated,
       isDirty: false,
       saveContext: {
@@ -251,7 +241,7 @@ const saveRequestAs = async () => {
       requestUpdated
     )
 
-    activeRESTTab.value.document = {
+    currentActiveTab.value.document = {
       request: requestUpdated,
       isDirty: false,
       saveContext: {
@@ -279,7 +269,7 @@ const saveRequestAs = async () => {
       requestUpdated
     )
 
-    activeRESTTab.value.document = {
+    currentActiveTab.value.document = {
       request: requestUpdated,
       isDirty: false,
       saveContext: {
@@ -439,7 +429,7 @@ const updateTeamCollectionOrFolder = (
       (result) => {
         const { createRequestInCollection } = result
 
-        activeRESTTab.value.document = {
+        currentActiveTab.value.document = {
           request: requestUpdated,
           isDirty: false,
           saveContext: {
@@ -460,7 +450,7 @@ const updateTeamCollectionOrFolder = (
 const requestSaved = () => {
   toast.success(`${t("request.added")}`)
   nextTick(() => {
-    activeRESTTab.value.document.isDirty = false
+    currentActiveTab.value.document.isDirty = false
   })
   hideModal()
 }

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

@@ -46,7 +46,7 @@
       </span>
     </div>
     <div class="flex flex-col overflow-hidden">
-      <HoppSmartTree :adapter="teamAdapter">
+      <SmartTree :adapter="teamAdapter">
         <template
           #content="{ node, toggleChildren, isOpen, highlightChildren }"
         >
@@ -311,7 +311,7 @@
             </HoppSmartPlaceholder>
           </div>
         </template>
-      </HoppSmartTree>
+      </SmartTree>
     </div>
   </div>
 </template>
@@ -326,10 +326,7 @@ import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { TeamCollection } from "~/helpers/teams/TeamCollection"
 import { TeamRequest } from "~/helpers/teams/TeamRequest"
-import {
+import { ChildrenResult, SmartTreeAdapter } from "~/helpers/treeAdapter"
-  ChildrenResult,
-  SmartTreeAdapter,
-} from "@hoppscotch/ui/dist/helpers/treeAdapter"
 import { cloneDeep } from "lodash-es"
 import { HoppRESTRequest } from "@hoppscotch/data"
 import { pipe } from "fp-ts/function"

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

@@ -6,13 +6,21 @@
     @close="hideModal"
   >
     <template #body>
-      <HoppSmartInput
+      <div class="flex flex-col">
+        <input
+          id="selectLabelGqlAdd"
           v-model="name"
+          v-focus
+          class="input floating-input"
           placeholder=" "
-        input-styles="floating-input"
+          type="text"
-        :label="t('action.label')"
+          autocomplete="off"
-        @submit="addNewCollection"
+          @keyup.enter="addNewCollection"
         />
+        <label for="selectLabelGqlAdd">
+          {{ t("action.label") }}
+        </label>
+      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,13 +6,21 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <HoppSmartInput
+      <div class="flex flex-col">
+        <input
+          id="selectLabelGqlAddFolder"
           v-model="name"
+          v-focus
+          class="input floating-input"
           placeholder=" "
-        :label="t('action.label')"
+          type="text"
-        input-styles="floating-input"
+          autocomplete="off"
-        @submit="addFolder"
+          @keyup.enter="addFolder"
         />
+        <label for="selectLabelGqlAddFolder">
+          {{ t("action.label") }}
+        </label>
+      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,13 +6,21 @@
     @close="emit('hide-modal')"
   >
     <template #body>
-      <HoppSmartInput
+      <div class="flex flex-col">
-        v-model="editingName"
+        <input
+          id="selectLabelGqlAddRequest"
+          v-model="name"
+          v-focus
+          class="input floating-input"
           placeholder=" "
-        :label="t('action.label')"
+          type="text"
-        input-styles="floating-input"
+          autocomplete="off"
-        @submit="addRequest"
+          @keyup.enter="addRequest"
         />
+        <label for="selectLabelGqlAddRequest">
+          {{ t("action.label") }}
+        </label>
+      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -36,7 +44,7 @@
 import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
-import { currentActiveTab } from "~/helpers/graphql/tab"
+import { getGQLSession } from "~/newstore/GQLSession"
 
 const toast = useToast()
 const t = useI18n()
@@ -57,24 +65,24 @@ const emit = defineEmits<{
   ): void
 }>()
 
-const editingName = ref("")
+const name = ref("")
 
 watch(
   () => props.show,
   (show) => {
     if (show) {
-      editingName.value = currentActiveTab.value?.document.request.name
+      name.value = getGQLSession().request.name
     }
   }
 )
 
 const addRequest = () => {
-  if (!editingName.value) {
+  if (!name.value) {
     toast.error(`${t("error.empty_req_name")}`)
     return
   }
   emit("add-request", {
-    name: editingName.value,
+    name: name.value,
     path: props.folderPath,
   })
   hideModal()

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

@@ -37,7 +37,6 @@
           @click="
             emit('add-request', {
               path: `${collectionIndex}`,
-              index: collection.requests.length,
             })
           "
         />
@@ -220,7 +219,6 @@ import {
   moveGraphqlRequest,
 } from "~/newstore/collections"
 import { Picked } from "~/helpers/types/HoppPicked"
-import { getTabsRefTo } from "~/helpers/graphql/tab"
 
 const props = defineProps({
   picked: { type: Object, default: null },
@@ -295,22 +293,6 @@ const removeCollection = () => {
     emit("select", null)
   }
 
-  const possibleTabs = getTabsRefTo((tab) => {
-    const ctx = tab.document.saveContext
-
-    if (!ctx) return false
-
-    return (
-      ctx.originLocation === "user-collection" &&
-      ctx.folderPath.startsWith(props.collectionIndex.toString())
-    )
-  })
-
-  for (const tab of possibleTabs) {
-    tab.value.document.saveContext = undefined
-    tab.value.document.isDirty = true
-  }
-
   removeGraphqlCollection(props.collectionIndex, props.collection.id)
   toast.success(`${t("state.deleted")}`)
 }

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

@@ -6,13 +6,21 @@
     @close="hideModal"
   >
     <template #body>
-      <HoppSmartInput
+      <div class="flex flex-col">
-        v-model="editingName"
+        <input
+          id="selectLabelGqlEdit"
+          v-model="name"
+          v-focus
+          class="input floating-input"
           placeholder=" "
-        :label="t('action.label')"
+          type="text"
-        input-styles="floating-input"
+          autocomplete="off"
-        @submit="saveCollection"
+          @keyup.enter="saveCollection"
         />
+        <label for="selectLabelGqlEdit">
+          {{ t("action.label") }}
+        </label>
+      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -52,17 +60,17 @@ const emit = defineEmits<{
 const t = useI18n()
 const toast = useToast()
 
-const editingName = ref<string | null>()
+const name = ref<string | null>()
 
 watch(
   () => props.editingCollectionName,
   (val) => {
-    editingName.value = val
+    name.value = val
   }
 )
 
 const saveCollection = () => {
-  if (!editingName.value) {
+  if (!name.value) {
     toast.error(`${t("collection.invalid_name")}`)
     return
   }
@@ -70,7 +78,7 @@ const saveCollection = () => {
   // TODO: Better typechecking here ?
   const collectionUpdated = {
     ...(props.editingCollection as any),
-    name: editingName.value,
+    name: name.value,
   }
 
   editGraphqlCollection(props.editingCollectionIndex, collectionUpdated)
@@ -78,7 +86,7 @@ const saveCollection = () => {
 }
 
 const hideModal = () => {
-  editingName.value = null
+  name.value = null
   emit("hide-modal")
 }
 </script>

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

@@ -6,13 +6,21 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <HoppSmartInput
+      <div class="flex flex-col">
+        <input
+          id="selectLabelGqlEditFolder"
           v-model="name"
+          v-focus
+          class="input floating-input"
           placeholder=" "
-        :label="t('action.label')"
+          type="text"
-        input-styles="floating-input"
+          autocomplete="off"
-        @submit="editFolder"
+          @keyup.enter="editFolder"
         />
+        <label for="selectLabelGqlEditFolder">
+          {{ t("action.label") }}
+        </label>
+      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -6,13 +6,21 @@
     @close="hideModal"
   >
     <template #body>
-      <HoppSmartInput
+      <div class="flex flex-col">
+        <input
+          id="selectLabelGqlEditReq"
           v-model="requestUpdateData.name"
+          v-focus
+          class="input floating-input"
           placeholder=" "
-        :label="t('action.label')"
+          type="text"
-        input-styles="floating-input"
+          autocomplete="off"
-        @submit="saveRequest"
+          @keyup.enter="saveRequest"
         />
+        <label for="selectLabelGqlEditReq">
+          {{ t("action.label") }}
+        </label>
+      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">

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

@@ -34,12 +34,7 @@
           :icon="IconFilePlus"
           :title="t('request.new')"
           class="hidden group-hover:inline-flex"
-          @click="
+          @click="emit('add-request', { path: folderPath })"
-            emit('add-request', {
-              path: folderPath,
-              index: folder.requests.length,
-            })
-          "
         />
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -203,7 +198,6 @@ import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { removeGraphqlFolder, moveGraphqlRequest } from "~/newstore/collections"
 import { computed, ref } from "vue"
-import { getTabsRefTo } from "~/helpers/graphql/tab"
 
 const toast = useToast()
 const t = useI18n()
@@ -255,8 +249,10 @@ const collectionIcon = computed(() => {
 
 const pick = () => {
   emit("select", {
+    picked: {
       pickedType: "gql-my-folder",
       folderPath: props.folderPath,
+    },
   })
 }
 
@@ -277,22 +273,6 @@ const removeFolder = () => {
     emit("select", { picked: null })
   }
 
-  const possibleTabs = getTabsRefTo((tab) => {
-    const ctx = tab.document.saveContext
-
-    if (!ctx) return false
-
-    return (
-      ctx.originLocation === "user-collection" &&
-      ctx.folderPath.startsWith(props.folderPath)
-    )
-  })
-
-  for (const tab of possibleTabs) {
-    tab.value.document.saveContext = undefined
-    tab.value.document.isDirty = true
-  }
-
   removeGraphqlFolder(props.folderPath, props.folder.id)
   toast.success(t("state.deleted"))
 }

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

@@ -20,28 +20,22 @@
         />
       </span>
       <span
-        class="flex items-center flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
+        class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
         @click="selectRequest()"
       >
         <span class="truncate" :class="{ 'text-accent': isSelected }">
           {{ request.name }}
         </span>
-        <span
-          v-if="isActive"
-          v-tippy="{ theme: 'tooltip' }"
-          class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
-          :title="`${t('collection.request_in_use')}`"
-        >
-          <span
-            class="absolute inline-flex flex-shrink-0 w-full h-full bg-green-500 rounded-full opacity-75 animate-ping"
-          >
-          </span>
-          <span
-            class="relative inline-flex flex-shrink-0 rounded-full h-1.5 w-1.5 bg-green-500"
-          ></span>
-        </span>
       </span>
       <div class="flex">
+        <HoppButtonSecondary
+          v-if="!saveRequest"
+          v-tippy="{ theme: 'tooltip' }"
+          :icon="IconRotateCCW"
+          :title="t('action.restore')"
+          class="hidden group-hover:inline-flex"
+          @click="selectRequest()"
+        />
         <span>
           <tippy
             ref="options"
@@ -127,6 +121,7 @@
 <script setup lang="ts">
 import IconCheckCircle from "~icons/lucide/check-circle"
 import IconFile from "~icons/lucide/file"
+import IconRotateCCW from "~icons/lucide/rotate-ccw"
 import IconMoreVertical from "~icons/lucide/more-vertical"
 import IconEdit from "~icons/lucide/edit"
 import IconCopy from "~icons/lucide/copy"
@@ -137,12 +132,7 @@ import { useToast } from "@composables/toast"
 import { HoppGQLRequest, makeGQLRequest } from "@hoppscotch/data"
 import { cloneDeep } from "lodash-es"
 import { removeGraphqlRequest } from "~/newstore/collections"
-import {
+import { setGQLSession } from "~/newstore/GQLSession"
-  createNewTab,
-  getTabRefWithSaveContext,
-  currentTabID,
-  currentActiveTab,
-} from "~/helpers/graphql/tab"
 
 // Template refs
 const tippyActions = ref<any | null>(null)
@@ -164,18 +154,6 @@ const props = defineProps({
   requestIndex: { type: Number, default: null },
 })
 
-const isActive = computed(() => {
-  const saveCtx = currentActiveTab.value?.document.saveContext
-
-  if (!saveCtx) return false
-
-  return (
-    saveCtx.originLocation === "user-collection" &&
-    saveCtx.folderPath === props.folderPath &&
-    saveCtx.requestIndex === props.requestIndex
-  )
-})
-
 // TODO: Better types please
 const emit = defineEmits(["select", "edit-request", "duplicate-request"])
 
@@ -201,24 +179,7 @@ const selectRequest = () => {
   if (props.saveRequest) {
     pick()
   } else {
-    const possibleTab = getTabRefWithSaveContext({
+    setGQLSession({
-      originLocation: "user-collection",
-      folderPath: props.folderPath,
-      requestIndex: props.requestIndex,
-    })
-
-    // Switch to that request if that request is open
-    if (possibleTab) {
-      currentTabID.value = possibleTab.value.id
-      return
-    }
-
-    createNewTab({
-      saveContext: {
-        originLocation: "user-collection",
-        folderPath: props.folderPath,
-        requestIndex: props.requestIndex,
-      },
       request: cloneDeep(
         makeGQLRequest({
           name: props.request.name,
@@ -229,7 +190,8 @@ const selectRequest = () => {
           auth: props.request.auth,
         })
       ),
-      isDirty: false,
+      schema: "",
+      response: "",
     })
   }
 }
@@ -252,18 +214,6 @@ const removeRequest = () => {
     emit("select", null)
   }
 
-  // Detach the request from any of the tabs
-  const possibleTab = getTabRefWithSaveContext({
-    originLocation: "user-collection",
-    folderPath: props.folderPath,
-    requestIndex: props.requestIndex,
-  })
-
-  if (possibleTab) {
-    possibleTab.value.document.saveContext = undefined
-    possibleTab.value.document.isDirty = true
-  }
-
   removeGraphqlRequest(props.folderPath, props.requestIndex, props.request.id)
   toast.success(`${t("state.deleted")}`)
 }

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

@@ -11,7 +11,7 @@
         type="search"
         autocomplete="off"
         :placeholder="t('action.search')"
-        class="py-2 pl-4 pr-2 bg-transparent !border-0"
+        class="py-2 pl-4 pr-2 bg-transparent"
       />
       <div
         class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"
@@ -137,6 +137,7 @@ import {
   addGraphqlFolder,
   saveGraphqlRequestAs,
 } from "~/newstore/collections"
+import { getGQLSession, setGQLSession } from "~/newstore/GQLSession"
 
 import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
@@ -145,7 +146,6 @@ import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { useColorMode } from "@composables/theming"
 import { platform } from "~/platform"
-import { createNewTab, currentActiveTab } from "~/helpers/graphql/tab"
 
 export default defineComponent({
   props: {
@@ -265,22 +265,17 @@ export default defineComponent({
       this.$data.editingCollectionIndex = collectionIndex
       this.displayModalEdit(true)
     },
-    onAddRequest({ name, path, index }) {
+    onAddRequest({ name, path }) {
       const newRequest = {
-        ...currentActiveTab.value.document.request,
+        ...getGQLSession().request,
         name,
       }
 
       saveGraphqlRequestAs(path, newRequest)
-
+      setGQLSession({
-      createNewTab({
-        saveContext: {
-          originLocation: "user-collection",
-          folderPath: path,
-          requestIndex: index,
-        },
         request: newRequest,
-        isDirty: false,
+        schema: "",
+        response: "",
       })
 
       platform.analytics?.logEvent({

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

@@ -18,13 +18,12 @@
       "
     >
       <WorkspaceCurrent :section="t('tab.collections')" />
-
+      <input
-      <HoppSmartInput
         v-model="filterTexts"
-        :placeholder="t('action.search')"
-        input-styles="py-2 pl-4 pr-2 bg-transparent !border-0"
         type="search"
-        :autofocus="false"
+        autocomplete="off"
+        :placeholder="t('action.search')"
+        class="py-2 pl-4 pr-2 bg-transparent"
         :disabled="collectionsType.type === 'team-collections'"
       />
     </div>

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

@@ -1,207 +0,0 @@
-<template>
-  <HoppSmartModal
-    v-if="show"
-    :title="t('environment.set_as_environment')"
-    @close="hideModal"
-  >
-    <template #body>
-      <div class="flex space-y-4 flex-1 flex-col">
-        <div class="flex items-center space-x-8 ml-2">
-          <label for="name" class="font-semibold min-w-10">{{
-            t("environment.name")
-          }}</label>
-          <input
-            v-model="editingName"
-            type="text"
-            :placeholder="t('environment.variable')"
-            class="input"
-          />
-        </div>
-        <div class="flex items-center space-x-8 ml-2">
-          <label for="value" class="font-semibold min-w-10">{{
-            t("environment.value")
-          }}</label>
-          <input type="text" :value="value" class="input" />
-        </div>
-        <div class="flex items-center space-x-8 ml-2">
-          <label for="scope" class="font-semibold min-w-10">
-            {{ t("environment.scope") }}
-          </label>
-          <div
-            class="relative flex flex-1 flex-col border border-divider rounded focus-visible:border-dividerDark"
-          >
-            <EnvironmentsSelector v-model="scope" :is-scope-selector="true" />
-          </div>
-        </div>
-        <div v-if="replaceWithVariable" class="flex space-x-2 mt-3">
-          <div class="min-w-18" />
-          <HoppSmartCheckbox
-            :on="replaceWithVariable"
-            title="t('environment.replace_with_variable'))"
-            @change="replaceWithVariable = !replaceWithVariable"
-          />
-          <label for="replaceWithVariable">
-            {{ t("environment.replace_with_variable") }}</label
-          >
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <span class="flex space-x-2">
-        <HoppButtonPrimary
-          :label="t('action.save')"
-          outline
-          @click="addEnvironment"
-        />
-        <HoppButtonSecondary
-          :label="t('action.cancel')"
-          outline
-          filled
-          @click="hideModal"
-        />
-      </span>
-    </template>
-  </HoppSmartModal>
-</template>
-
-<script lang="ts" setup>
-import { Environment } from "@hoppscotch/data"
-import { ref, watch } from "vue"
-import { useI18n } from "~/composables/i18n"
-import { useToast } from "~/composables/toast"
-import { GQLError } from "~/helpers/backend/GQLClient"
-import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
-import {
-  addEnvironmentVariable,
-  addGlobalEnvVariable,
-} from "~/newstore/environments"
-import * as TE from "fp-ts/TaskEither"
-import { pipe } from "fp-ts/function"
-import { updateTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
-import { currentActiveTab } from "~/helpers/rest/tab"
-
-const t = useI18n()
-const toast = useToast()
-
-const props = defineProps<{
-  show: boolean
-  position: { top: number; left: number }
-  name: string
-  value: string
-}>()
-
-const emit = defineEmits<{
-  (e: "hide-modal"): void
-}>()
-
-const hideModal = () => {
-  emit("hide-modal")
-}
-
-watch(
-  () => props.show,
-  (newVal) => {
-    if (!newVal) {
-      scope.value = {
-        type: "global",
-      }
-      editingName.value = ""
-      replaceWithVariable.value = false
-    }
-  }
-)
-
-type Scope =
-  | {
-      type: "global"
-    }
-  | {
-      type: "my-environment"
-      environment: Environment
-      index: number
-    }
-  | {
-      type: "team-environment"
-      environment: TeamEnvironment
-    }
-
-const scope = ref<Scope>({
-  type: "global",
-})
-
-const replaceWithVariable = ref(false)
-
-const editingName = ref(props.name)
-
-const addEnvironment = async () => {
-  if (!editingName.value) {
-    toast.error(`${t("environment.invalid_name")}`)
-    return
-  }
-  if (scope.value.type === "global") {
-    addGlobalEnvVariable({
-      key: editingName.value,
-      value: props.value,
-    })
-    toast.success(`${t("environment.updated")}`)
-  } else if (scope.value.type === "my-environment") {
-    addEnvironmentVariable(scope.value.index, {
-      key: editingName.value,
-      value: props.value,
-    })
-    toast.success(`${t("environment.updated")}`)
-  } else {
-    const newVariables = [
-      ...scope.value.environment.environment.variables,
-      {
-        key: editingName.value,
-        value: props.value,
-      },
-    ]
-    await pipe(
-      updateTeamEnvironment(
-        JSON.stringify(newVariables),
-        scope.value.environment.id,
-        scope.value.environment.environment.name
-      ),
-      TE.match(
-        (err: GQLError<string>) => {
-          console.error(err)
-          toast.error(`${getErrorMessage(err)}`)
-        },
-        () => {
-          hideModal()
-          toast.success(`${t("environment.updated")}`)
-        }
-      )
-    )()
-  }
-  if (replaceWithVariable.value) {
-    //replace the current tab endpoint with the variable name with << and >>
-    const variableName = `<<${editingName.value}>>`
-    //replace the currenttab endpoint containing the value in the text with variablename
-    currentActiveTab.value.document.request.endpoint =
-      currentActiveTab.value.document.request.endpoint.replace(
-        props.value,
-        variableName
-      )
-  }
-
-  hideModal()
-}
-
-const getErrorMessage = (err: GQLError<string>) => {
-  if (err.type === "network_error") {
-    return t("error.network_error")
-  } else {
-    switch (err.error) {
-      case "team_environment/not_found":
-        return t("team_environment.not_found")
-      case "Forbidden resource":
-        return t("profile.no_permission")
-      default:
-        return t("error.something_went_wrong")
-    }
-  }
-}
-</script>

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

@@ -1,15 +1,14 @@
 <template>
-  <div class="flex divide-x divide-dividerLight">
   <tippy
     interactive
     trigger="click"
     theme="popover"
-      :on-shown="() => envSelectorActions!.focus()"
+    :on-shown="() => tippyActions!.focus()"
   >
     <span
       v-tippy="{ theme: 'tooltip' }"
       :title="`${t('environment.select')}`"
-        class="select-wrapper"
+      class="bg-transparent border-b border-dividerLight select-wrapper"
     >
       <HoppButtonSecondary
         :icon="IconLayers"
@@ -25,7 +24,7 @@
     </span>
     <template #content="{ hide }">
       <div
-          ref="envSelectorActions"
+        ref="tippyActions"
         role="menu"
         class="flex flex-col focus:outline-none"
         tabindex="0"
@@ -50,11 +49,7 @@
         />
         <HoppSmartTabs
           v-model="selectedEnvTab"
-            :styles="`sticky overflow-x-auto my-2 border border-divider rounded flex-shrink-0 z-0 top-0 bg-primary ${
+          styles="sticky overflow-x-auto my-2 border border-divider rounded flex-shrink-0 z-10 top-0 bg-primary"
-              !isTeamSelected || workspace.type === 'personal'
-                ? 'bg-primaryLight'
-                : ''
-            }`"
           render-inactive-tabs
         >
           <HoppSmartTab
@@ -70,28 +65,18 @@
               :active-info-icon="index === selectedEnv.index"
               @click="
                 () => {
-                    selectedEnvironmentIndex = {
+                  selectedEnvironmentIndex = { type: 'MY_ENV', index: index }
-                      type: 'MY_ENV',
-                      index: index,
-                    }
                   hide()
                 }
               "
             />
-              <div
+            <HoppSmartPlaceholder
               v-if="myEnvironments.length === 0"
-                class="flex flex-col items-center justify-center text-secondaryLight"
-              >
-                <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')}`"
-                />
+              :text="t('empty.environments')"
-                <span class="pb-2 text-center">
+            >
-                  {{ t("empty.environments") }}
+            </HoppSmartPlaceholder>
-                </span>
-              </div>
           </HoppSmartTab>
           <HoppSmartTab
             :id="'team-environments'"
@@ -103,11 +88,9 @@
               class="flex flex-col items-center justify-center p-4"
             >
               <HoppSmartSpinner class="my-4" />
-                <span class="text-secondaryLight">
+              <span class="text-secondaryLight">{{ t("state.loading") }}</span>
-                  {{ t("state.loading") }}
-                </span>
             </div>
-              <div v-if="isTeamSelected" class="flex flex-col">
+            <div v-else-if="isTeamSelected" class="flex flex-col">
               <HoppSmartItem
                 v-for="(gen, index) in teamEnvironmentList"
                 :key="`gen-team-${index}`"
@@ -129,20 +112,14 @@
                   }
                 "
               />
-                <div
+
+              <HoppSmartPlaceholder
                 v-if="teamEnvironmentList.length === 0"
-                  class="flex flex-col items-center justify-center text-secondaryLight"
-                >
-                  <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')}`"
-                  />
+                :text="t('empty.environments')"
-                  <span class="pb-2 text-center">
+              >
-                    {{ t("empty.environments") }}
+              </HoppSmartPlaceholder>
-                  </span>
-                </div>
             </div>
             <div
               v-if="!teamListLoading && teamAdapterError"
@@ -156,150 +133,29 @@
       </div>
     </template>
   </tippy>
-    <span class="flex">
-      <tippy
-        interactive
-        trigger="click"
-        theme="popover"
-        :on-shown="() => envQuickPeekActions!.focus()"
-      >
-        <HoppButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="`${t('environment.quick_peek')}`"
-          :icon="IconEye"
-          class="!px-4"
-        />
-        <template #content="{ hide }">
-          <div
-            ref="envQuickPeekActions"
-            role="menu"
-            class="flex flex-col focus:outline-none"
-            tabindex="0"
-            @keyup.escape="hide()"
-          >
-            <div
-              class="sticky top-0 font-semibold truncate flex items-center justify-between text-secondaryDark bg-primary border border-divider rounded pl-4"
-            >
-              {{ t("environment.global_variables") }}
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="t('action.edit')"
-                :icon="IconEdit"
-                @click="
-                  () => {
-                    editGlobalEnv()
-                    hide()
-                  }
-                "
-              />
-            </div>
-            <div class="my-2 flex flex-col flex-1 space-y-2 pl-4 pr-2">
-              <div class="flex flex-1 space-x-4">
-                <span class="w-1/4 min-w-32 truncate text-tiny font-semibold">
-                  {{ t("environment.name") }}
-                </span>
-                <span class="w-full min-w-32 truncate text-tiny font-semibold">
-                  {{ t("environment.value") }}
-                </span>
-              </div>
-              <div
-                v-for="(variable, index) in globalEnvs"
-                :key="index"
-                class="flex flex-1 space-x-4"
-              >
-                <span class="text-secondaryLight w-1/4 min-w-32 truncate">
-                  {{ variable.key }}
-                </span>
-                <span class="text-secondaryLight w-full min-w-32 truncate">
-                  {{ variable.value }}
-                </span>
-              </div>
-              <div v-if="globalEnvs.length === 0" class="text-secondaryLight">
-                {{ t("environment.empty_variables") }}
-              </div>
-            </div>
-            <div
-              class="sticky top-0 mt-2 font-semibold truncate flex items-center justify-between text-secondaryDark bg-primary border border-divider rounded pl-4"
-              :class="{
-                'bg-primaryLight': !selectedEnv.variables,
-              }"
-            >
-              {{ t("environment.list") }}
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :disabled="!selectedEnv.variables"
-                :title="t('action.edit')"
-                :icon="IconEdit"
-                @click="
-                  () => {
-                    editEnv()
-                    hide()
-                  }
-                "
-              />
-            </div>
-            <div
-              v-if="selectedEnv.type === 'NO_ENV_SELECTED'"
-              class="text-secondaryLight my-2 flex flex-col flex-1 pl-4"
-            >
-              {{ t("environment.no_active_environment") }}
-            </div>
-            <div v-else class="my-2 flex flex-col flex-1 space-y-2 pl-4 pr-2">
-              <div class="flex flex-1 space-x-4">
-                <span class="w-1/4 min-w-32 truncate text-tiny font-semibold">
-                  {{ t("environment.name") }}
-                </span>
-                <span class="w-full min-w-32 truncate text-tiny font-semibold">
-                  {{ t("environment.value") }}
-                </span>
-              </div>
-              <div
-                v-for="(variable, index) in environmentVariables"
-                :key="index"
-                class="flex flex-1 space-x-4"
-              >
-                <span class="text-secondaryLight w-1/4 min-w-32 truncate">
-                  {{ variable.key }}
-                </span>
-                <span class="text-secondaryLight w-full min-w-32 truncate">
-                  {{ variable.value }}
-                </span>
-              </div>
-              <div
-                v-if="environmentVariables.length === 0"
-                class="text-secondaryLight"
-              >
-                {{ t("environment.empty_variables") }}
-              </div>
-            </div>
-          </div>
-        </template>
-      </tippy>
-    </span>
-  </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue"
 import IconCheck from "~icons/lucide/check"
 import IconLayers from "~icons/lucide/layers"
-import IconEye from "~icons/lucide/eye"
-import IconEdit from "~icons/lucide/edit"
 import { TippyComponent } from "vue-tippy"
 import { useI18n } from "~/composables/i18n"
 import { GQLError } from "~/helpers/backend/GQLClient"
 import { useReadonlyStream, useStream } from "~/composables/stream"
 import {
   environments$,
-  globalEnv$,
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
-import { workspaceStatus$ } from "~/newstore/workspace"
+import { changeWorkspace, workspaceStatus$ } from "~/newstore/workspace"
 import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import { useColorMode } from "@composables/theming"
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
-import { invokeAction } from "~/helpers/actions"
+import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
+import { useLocalState } from "~/newstore/localstate"
+import { onLoggedIn } from "~/composables/auth"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const mdAndLarger = breakpoints.greater("md")
@@ -348,15 +204,44 @@ watch(
   }
 )
 
+// TeamList-Adapter
+const teamListAdapter = new TeamListAdapter(true)
+const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
+const teamListFetched = ref(false)
+const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
+
+onLoggedIn(() => {
+  !teamListAdapter.isInitialized && teamListAdapter.initialize()
+})
+
+const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
+  REMEMBERED_TEAM_ID.value = team.id
+  changeWorkspace({
+    teamID: team.id,
+    teamName: team.name,
+    type: "team",
+  })
+}
+
+watch(
+  () => myTeams.value,
+  (newTeams) => {
+    if (newTeams && !teamListFetched.value) {
+      teamListFetched.value = true
+      if (REMEMBERED_TEAM_ID.value) {
+        const team = newTeams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
+        if (team) switchToTeamWorkspace(team)
+      }
+    }
+  }
+)
+
 const selectedEnv = computed(() => {
   if (selectedEnvironmentIndex.value.type === "MY_ENV") {
-    const environment =
-      myEnvironments.value[selectedEnvironmentIndex.value.index]
     return {
       type: "MY_ENV",
       index: selectedEnvironmentIndex.value.index,
-      name: environment.name,
+      name: myEnvironments.value[selectedEnvironmentIndex.value.index].name,
-      variables: environment.variables,
     }
   } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
     const teamEnv = teamEnvironmentList.value.find(
@@ -370,7 +255,6 @@ const selectedEnv = computed(() => {
         type: "TEAM_ENV",
         name: teamEnv.environment.name,
         teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
-        variables: teamEnv.environment.variables,
       }
     } else {
       return { type: "NO_ENV_SELECTED" }
@@ -381,8 +265,7 @@ const selectedEnv = computed(() => {
 })
 
 // Template refs
-const envSelectorActions = ref<TippyComponent | null>(null)
+const tippyActions = ref<TippyComponent | null>(null)
-const envQuickPeekActions = ref<TippyComponent | null>(null)
 
 const getErrorMessage = (err: GQLError<string>) => {
   if (err.type === "network_error") {
@@ -396,32 +279,4 @@ const getErrorMessage = (err: GQLError<string>) => {
     }
   }
 }
-
-const globalEnvs = useReadonlyStream(globalEnv$, [])
-
-const environmentVariables = computed(() => {
-  if (selectedEnv.value.variables) {
-    return selectedEnv.value.variables
-  } else {
-    return []
-  }
-})
-
-const editGlobalEnv = () => {
-  invokeAction("modals.my.environment.edit", {
-    envName: "Global",
-  })
-}
-
-const editEnv = () => {
-  if (selectedEnv.value.type === "MY_ENV" && selectedEnv.value.name) {
-    invokeAction("modals.my.environment.edit", {
-      envName: selectedEnv.value.name,
-    })
-  } else if (selectedEnv.value.type === "TEAM_ENV" && selectedEnv.value.name) {
-    invokeAction("modals.team.environment.edit", {
-      envName: selectedEnv.value.name,
-    })
-  }
-}
 </script>

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

@@ -11,9 +11,9 @@
         @edit-environment="editEnvironment('Global')"
       />
     </div>
-    <EnvironmentsMy v-show="environmentType.type === 'my-environments'" />
+    <EnvironmentsMy v-if="environmentType.type === 'my-environments'" />
     <EnvironmentsTeams
-      v-show="environmentType.type === 'team-environments'"
+      v-if="environmentType.type === 'team-environments'"
       :team="environmentType.selectedTeam"
       :team-environments="teamEnvironmentList"
       :loading="loading"
@@ -26,13 +26,6 @@
       :editing-variable-name="editingVariableName"
       @hide-modal="displayModalEdit(false)"
     />
-    <EnvironmentsAdd
-      :show="showModalNew"
-      :name="editingVariableName"
-      :value="editingVariableValue"
-      :position="position"
-      @hide-modal="displayModalNew(false)"
-    />
   </div>
 </template>
 
@@ -168,18 +161,10 @@ watch(
   }
 )
 
-const showModalNew = ref(false)
 const showModalDetails = ref(false)
 const action = ref<"new" | "edit">("edit")
 const editingEnvironmentIndex = ref<"Global" | null>(null)
 const editingVariableName = ref("")
-const editingVariableValue = ref("")
-
-const position = ref({ top: 0, left: 0 })
-
-const displayModalNew = (shouldDisplay: boolean) => {
-  showModalNew.value = shouldDisplay
-}
 
 const displayModalEdit = (shouldDisplay: boolean) => {
   action.value = "edit"
@@ -198,15 +183,10 @@ const resetSelectedData = () => {
   editingEnvironmentIndex.value = null
 }
 
-defineActionHandler("modals.environment.new", () => {
-  action.value = "new"
-  showModalDetails.value = true
-})
-
 defineActionHandler(
   "modals.my.environment.edit",
   ({ envName, variableName }) => {
-    if (variableName) editingVariableName.value = variableName
+    editingVariableName.value = variableName
     envName === "Global" && editEnvironment("Global")
   }
 )
@@ -253,10 +233,4 @@ watch(
   },
   { deep: true }
 )
-
-defineActionHandler("modals.environment.add", ({ envName, variableName }) => {
-  editingVariableName.value = envName
-  editingVariableValue.value = variableName
-  displayModalNew(true)
-})
 </script>

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

@@ -7,15 +7,22 @@
   >
     <template #body>
       <div class="flex flex-col">
-        <HoppSmartInput
+        <div class="relative flex">
-          v-model="editingName"
+          <input
+            id="selectLabelEnvEdit"
+            v-model="name"
+            v-focus
+            class="input floating-input"
             placeholder=" "
-          :label="t('action.label')"
+            type="text"
-          input-styles="floating-input"
+            autocomplete="off"
             :disabled="editingEnvironmentIndex === 'Global'"
-          @submit="saveEnvironment"
+            @keyup.enter="saveEnvironment"
           />
-
+          <label for="selectLabelEnvEdit">
+            {{ t("action.label") }}
+          </label>
+        </div>
         <div class="flex items-center justify-between flex-1">
           <label for="variableList" class="p-4">
             {{ t("environment.variable_list") }}
@@ -81,6 +88,7 @@
             <HoppButtonSecondary
               :label="`${t('add.new')}`"
               filled
+              class="mb-4"
               @click="addEnvironmentVariable"
             />
           </HoppSmartPlaceholder>
@@ -170,7 +178,7 @@ const emit = defineEmits<{
 
 const idTicker = ref(0)
 
-const editingName = ref<string | null>(null)
+const name = ref<string | null>(null)
 const vars = ref<EnvironmentVariable[]>([
   { id: idTicker.value++, env: { key: "", value: "" } },
 ])
@@ -223,12 +231,10 @@ const liveEnvs = computed(() => {
   }
 
   if (props.editingEnvironmentIndex === "Global") {
-    return [
+    return [...vars.value.map((x) => ({ ...x.env, source: name.value! }))]
-      ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
-    ]
   } else {
     return [
-      ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
+      ...vars.value.map((x) => ({ ...x.env, source: name.value! })),
       ...globalVars.value.map((x) => ({ ...x, source: "Global" })),
     ]
   }
@@ -238,7 +244,7 @@ watch(
   () => props.show,
   (show) => {
     if (show) {
-      editingName.value = workingEnv.value?.name ?? null
+      name.value = workingEnv.value?.name ?? null
       vars.value = pipe(
         workingEnv.value?.variables ?? [],
         A.map((e) => ({
@@ -271,7 +277,7 @@ const removeEnvironmentVariable = (index: number) => {
 }
 
 const saveEnvironment = () => {
-  if (!editingName.value) {
+  if (!name.value) {
     toast.error(`${t("environment.invalid_name")}`)
     return
   }
@@ -287,13 +293,13 @@ const saveEnvironment = () => {
   )
 
   const environmentUpdated: Environment = {
-    name: editingName.value,
+    name: name.value,
     variables: filterdVariables,
   }
 
   if (props.action === "new") {
     // Creating a new environment
-    createEnvironment(editingName.value, environmentUpdated.variables)
+    createEnvironment(name.value, environmentUpdated.variables)
     setSelectedEnvironmentIndex({
       type: "MY_ENV",
       index: envList.value.length - 1,
@@ -331,7 +337,7 @@ const saveEnvironment = () => {
 }
 
 const hideModal = () => {
-  editingName.value = null
+  name.value = null
   emit("hide-modal")
 }
 </script>

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

@@ -158,7 +158,5 @@ const duplicateEnvironments = () => {
       cloneDeep(getGlobalVariables())
     )
   } else duplicateEnvironment(props.environmentIndex)
-
-  toast.success(`${t("environment.duplicated")}`)
 }
 </script>

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

@@ -42,6 +42,7 @@
         :label="`${t('add.new')}`"
         filled
         outline
+        class="mb-4"
         @click="displayModalAdd(true)"
       />
     </HoppSmartPlaceholder>
@@ -108,7 +109,7 @@ const resetSelectedData = () => {
 defineActionHandler(
   "modals.my.environment.edit",
   ({ envName, variableName }) => {
-    if (variableName) editingVariableName.value = variableName
+    editingVariableName.value = variableName
     const envIndex: number = environments.value.findIndex(
       (environment: Environment) => {
         return environment.name === envName

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

@@ -7,15 +7,23 @@
   >
     <template #body>
       <div class="flex flex-col px-2">
-        <HoppSmartInput
+        <div class="relative flex">
-          v-model="editingName"
+          <input
-          placeholder=" "
+            id="selectLabelEnvEdit"
-          :input-styles="['floating-input', isViewer && 'opacity-25']"
+            v-model="name"
-          :label="t('action.label')"
+            v-focus
+            class="input floating-input"
+            :class="isViewer && 'opacity-25'"
+            placeholder=""
+            type="text"
+            autocomplete="off"
             :disabled="isViewer"
-          @submit="saveEnvironment"
+            @keyup.enter="saveEnvironment"
           />
-
+          <label for="selectLabelEnvEdit">
+            {{ t("action.label") }}
+          </label>
+        </div>
         <div class="flex items-center justify-between flex-1">
           <label for="variableList" class="p-4">
             {{ t("environment.variable_list") }}
@@ -86,11 +94,13 @@
               disabled
               :label="`${t('add.new')}`"
               filled
+              class="mb-4"
             />
             <HoppButtonSecondary
               v-else
               :label="`${t('add.new')}`"
               filled
+              class="mb-4"
               @click="addEnvironmentVariable"
             />
           </HoppSmartPlaceholder>
@@ -180,7 +190,7 @@ const emit = defineEmits<{
 
 const idTicker = ref(0)
 
-const editingName = ref<string | null>(null)
+const name = ref<string | null>(null)
 const vars = ref<EnvironmentVariable[]>([
   { id: idTicker.value++, env: { key: "", value: "" } },
 ])
@@ -206,9 +216,7 @@ const liveEnvs = computed(() => {
   if (evnExpandError.value) {
     return []
   } else {
-    return [
+    return [...vars.value.map((x) => ({ ...x.env, source: name.value! }))]
-      ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
-    ]
   }
 })
 
@@ -217,7 +225,7 @@ watch(
   (show) => {
     if (show) {
       if (props.action === "new") {
-        editingName.value = null
+        name.value = null
         vars.value = pipe(
           props.envVars() ?? [],
           A.map((e: { key: string; value: string }) => ({
@@ -226,7 +234,7 @@ watch(
           }))
         )
       } else if (props.editingEnvironment !== null) {
-        editingName.value = props.editingEnvironment.environment.name ?? null
+        name.value = props.editingEnvironment.environment.name ?? null
         vars.value = pipe(
           props.editingEnvironment.environment.variables ?? [],
           A.map((e: { key: string; value: string }) => ({
@@ -264,7 +272,7 @@ const isLoading = ref(false)
 const saveEnvironment = async () => {
   isLoading.value = true
 
-  if (!editingName.value) {
+  if (!name.value) {
     toast.error(`${t("environment.invalid_name")}`)
     return
   }
@@ -289,7 +297,7 @@ const saveEnvironment = async () => {
       createTeamEnvironment(
         JSON.stringify(filterdVariables),
         props.editingTeamId,
-        editingName.value
+        name.value
       ),
       TE.match(
         (err: GQLError<string>) => {
@@ -312,7 +320,7 @@ const saveEnvironment = async () => {
       updateTeamEnvironment(
         JSON.stringify(filterdVariables),
         props.editingEnvironment.id,
-        editingName.value
+        name.value
       ),
       TE.match(
         (err: GQLError<string>) => {
@@ -331,7 +339,7 @@ const saveEnvironment = async () => {
 }
 
 const hideModal = () => {
-  editingName.value = null
+  name.value = null
   emit("hide-modal")
 }
 

packages/hoppscotch-common/src/components/environments/teams/Environment.vue

@@ -154,7 +154,7 @@ const duplicateEnvironments = () => {
         toast.error(`${getErrorMessage(err)}`)
       },
       () => {
-        toast.success(`${t("environment.duplicated")}`)
+        toast.success(`${t("team_environment.duplicate")}`)
       }
     )
   )()

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

@@ -54,6 +54,7 @@
         v-tippy="{ theme: 'tooltip' }"
         disabled
         filled
+        class="mb-4"
         :icon="IconPlus"
         :title="t('team.no_access')"
         :label="t('action.new')"
@@ -63,6 +64,7 @@
         :label="`${t('add.new')}`"
         filled
         outline
+        class="mb-4"
         @click="displayModalAdd(true)"
       />
     </HoppSmartPlaceholder>
@@ -176,7 +178,7 @@ const getErrorMessage = (err: GQLError<string>) => {
 defineActionHandler(
   "modals.team.environment.edit",
   ({ envName, variableName }) => {
-    if (variableName) editingVariableName.value = variableName
+    editingVariableName.value = variableName
     const teamEnvToEdit = props.teamEnvironments.find(
       (environment) => environment.environment.name === envName
     )

packages/hoppscotch-common/src/components/firebase/Login.vue

@@ -9,22 +9,27 @@
     <template #body>
       <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
         <HoppSmartItem
-          v-for="provider in allowedAuthProviders"
+          :loading="signingInWithGitHub"
-          :key="provider.id"
+          :icon="IconGithub"
-          :loading="provider.isLoading.value"
+          :label="`${t('auth.continue_with_github')}`"
-          :icon="provider.icon"
+          @click="signInWithGithub"
-          :label="provider.label"
-          @click="provider.action"
         />
-
-        <hr v-if="additonalLoginItems.length > 0" />
-
         <HoppSmartItem
-          v-for="loginItem in additonalLoginItems"
+          :loading="signingInWithGoogle"
-          :key="loginItem.id"
+          :icon="IconGoogle"
-          :icon="loginItem.icon"
+          :label="`${t('auth.continue_with_google')}`"
-          :label="loginItem.text(t)"
+          @click="signInWithGoogle"
-          @click="doAdditionalLoginItemClickAction(loginItem)"
+        />
+        <HoppSmartItem
+          :loading="signingInWithMicrosoft"
+          :icon="IconMicrosoft"
+          :label="`${t('auth.continue_with_microsoft')}`"
+          @click="signInWithMicrosoft"
+        />
+        <HoppSmartItem
+          :icon="IconEmail"
+          :label="`${t('auth.continue_with_email')}`"
+          @click="mode = 'email'"
         />
       </div>
       <form
@@ -32,14 +37,24 @@
         class="flex flex-col space-y-2"
         @submit.prevent="signInWithEmail"
       >
-        <HoppSmartInput
+        <div class="flex flex-col">
+          <input
+            id="email"
             v-model="form.email"
-          type="email"
+            v-focus
+            class="input floating-input"
             placeholder=" "
-          :label="t('auth.email')"
+            type="email"
-          input-styles="floating-input"
+            name="email"
+            autocomplete="off"
+            required
+            spellcheck="false"
+            autofocus
           />
-
+          <label for="email">
+            {{ t("auth.email") }}
+          </label>
+        </div>
         <HoppButtonPrimary
           :loading="signingInWithEmail"
           type="submit"
@@ -108,80 +123,68 @@
   </HoppSmartModal>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
-import { Ref, computed, onMounted, ref } from "vue"
+import { defineComponent } from "vue"
-
-import { useStreamSubscriber } from "@composables/stream"
-import { useToast } from "@composables/toast"
-import { useI18n } from "@composables/i18n"
-
 import { platform } from "~/platform"
-import { setLocalConfig } from "~/newstore/localpersistence"
-
 import IconGithub from "~icons/auth/github"
 import IconGoogle from "~icons/auth/google"
 import IconEmail from "~icons/auth/email"
 import IconMicrosoft from "~icons/auth/microsoft"
 import IconArrowLeft from "~icons/lucide/arrow-left"
+import { setLocalConfig } from "~/newstore/localpersistence"
+import { useStreamSubscriber } from "@composables/stream"
+import { useToast } from "@composables/toast"
+import { useI18n } from "@composables/i18n"
 
-import { LoginItemDef } from "~/platform/auth"
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  emits: ["hide-modal"],
+  setup() {
+    const { subscribeToStream } = useStreamSubscriber()
 
-defineProps<{
+    const tosLink = import.meta.env.VITE_APP_TOS_LINK
-  show: boolean
+    const privacyPolicyLink = import.meta.env.VITE_APP_PRIVACY_POLICY_LINK
-}>()
 
-const emit = defineEmits<{
+    return {
-  (e: "hide-modal"): void
+      subscribeToStream,
-}>()
+      t: useI18n(),
-
+      toast: useToast(),
-const { subscribeToStream } = useStreamSubscriber()
+      IconGithub,
-const t = useI18n()
+      IconGoogle,
-const toast = useToast()
+      IconEmail,
-
+      IconMicrosoft,
-const form = {
+      IconArrowLeft,
+      tosLink,
+      privacyPolicyLink,
+    }
+  },
+  data() {
+    return {
+      form: {
         email: "",
-}
+      },
-
+      signingInWithGoogle: false,
-const signingInWithGoogle = ref(false)
+      signingInWithGitHub: false,
-const signingInWithGitHub = ref(false)
+      signingInWithMicrosoft: false,
-const signingInWithMicrosoft = ref(false)
+      signingInWithEmail: false,
-const signingInWithEmail = ref(false)
+      mode: "sign-in",
-const mode = ref("sign-in")
+    }
-
+  },
-const tosLink = import.meta.env.VITE_APP_TOS_LINK
+  mounted() {
-const privacyPolicyLink = import.meta.env.VITE_APP_PRIVACY_POLICY_LINK
-
-type AuthProviderItem = {
-  id: string
-  icon: typeof IconGithub
-  label: string
-  action: (...args: any[]) => any
-  isLoading: Ref<boolean>
-}
-
-const additonalLoginItems = computed(
-  () => platform.auth.additionalLoginItems ?? []
-)
-
-const doAdditionalLoginItemClickAction = async (item: LoginItemDef) => {
-  await item.onClick()
-  emit("hide-modal")
-}
-
-onMounted(() => {
     const currentUser$ = platform.auth.getCurrentUserStream()
 
-  subscribeToStream(currentUser$, (user) => {
+    this.subscribeToStream(currentUser$, (user) => {
-    if (user) hideModal()
+      if (user) this.hideModal()
     })
-})
+  },
-
+  methods: {
-const showLoginSuccess = () => {
+    showLoginSuccess() {
-  toast.success(`${t("auth.login_success")}`)
+      this.toast.success(`${this.t("auth.login_success")}`)
-}
+    },
-
+    async signInWithGoogle() {
-const signInWithGoogle = async () => {
+      this.signingInWithGoogle = true
-  signingInWithGoogle.value = true
 
       try {
         await platform.auth.signInUserWithGoogle()
@@ -191,33 +194,32 @@ const signInWithGoogle = async () => {
         A auth/account-exists-with-different-credential Firebase error wont happen between Google and any other providers
         Seems Google account overwrites accounts of other providers https://github.com/firebase/firebase-android-sdk/issues/25
         */
-    toast.error(`${t("error.something_went_wrong")}`)
+        this.toast.error(`${this.t("error.something_went_wrong")}`)
       }
 
-  signingInWithGoogle.value = false
+      this.signingInWithGoogle = false
-}
+    },
-
+    async signInWithGithub() {
-const signInWithGithub = async () => {
+      this.signingInWithGitHub = true
-  signingInWithGitHub.value = true
 
       const result = await platform.auth.signInUserWithGithub()
 
       if (!result) {
-    signingInWithGitHub.value = false
+        this.signingInWithGitHub = false
         return
       }
 
       if (result.type === "success") {
         // this.showLoginSuccess()
       } else if (result.type === "account-exists-with-different-cred") {
-    toast.info(`${t("auth.account_exists")}`, {
+        this.toast.info(`${this.t("auth.account_exists")}`, {
           duration: 0,
           closeOnSwipe: false,
           action: {
-        text: `${t("action.yes")}`,
+            text: `${this.t("action.yes")}`,
             onClick: async (_, toastObject) => {
               await result.link()
-          showLoginSuccess()
+              this.showLoginSuccess()
 
               toastObject.goAway(0)
             },
@@ -225,14 +227,13 @@ const signInWithGithub = async () => {
         })
       } else {
         console.log("error logging into github", result.err)
-    toast.error(`${t("error.something_went_wrong")}`)
+        this.toast.error(`${this.t("error.something_went_wrong")}`)
       }
 
-  signingInWithGitHub.value = false
+      this.signingInWithGitHub = false
-}
+    },
-
+    async signInWithMicrosoft() {
-const signInWithMicrosoft = async () => {
+      this.signingInWithMicrosoft = true
-  signingInWithMicrosoft.value = true
 
       try {
         await platform.auth.signInUserWithMicrosoft()
@@ -247,82 +248,34 @@ const signInWithMicrosoft = async () => {
             @firebase/auth: Auth (9.6.11): INTERNAL ASSERTION FAILED: Pending promise was never set
         They may be related to https://github.com/firebase/firebaseui-web/issues/947
         */
-    toast.error(`${t("error.something_went_wrong")}`)
+        this.toast.error(`${this.t("error.something_went_wrong")}`)
       }
 
-  signingInWithMicrosoft.value = false
+      this.signingInWithMicrosoft = false
-}
+    },
-
+    async signInWithEmail() {
-const signInWithEmail = async () => {
+      this.signingInWithEmail = true
-  signingInWithEmail.value = true
 
       await platform.auth
-    .signInWithEmail(form.email)
+        .signInWithEmail(this.form.email)
         .then(() => {
-      mode.value = "email-sent"
+          this.mode = "email-sent"
-      setLocalConfig("emailForSignIn", form.email)
+          setLocalConfig("emailForSignIn", this.form.email)
         })
         .catch((e) => {
           console.error(e)
-      toast.error(e.message)
+          this.toast.error(e.message)
-      signingInWithEmail.value = false
+          this.signingInWithEmail = false
         })
         .finally(() => {
-      signingInWithEmail.value = false
+          this.signingInWithEmail = false
         })
-}
-
-const hideModal = () => {
-  mode.value = "sign-in"
-  toast.clear()
-
-  emit("hide-modal")
-}
-
-const authProviders: AuthProviderItem[] = [
-  {
-    id: "GITHUB",
-    icon: IconGithub,
-    label: t("auth.continue_with_github"),
-    action: signInWithGithub,
-    isLoading: signingInWithGitHub,
     },
-  {
+    hideModal() {
-    id: "GOOGLE",
+      this.mode = "sign-in"
-    icon: IconGoogle,
+      this.toast.clear()
-    label: t("auth.continue_with_google"),
+      this.$emit("hide-modal")
-    action: signInWithGoogle,
-    isLoading: signingInWithGoogle,
     },
-  {
-    id: "MICROSOFT",
-    icon: IconMicrosoft,
-    label: t("auth.continue_with_microsoft"),
-    action: signInWithMicrosoft,
-    isLoading: signingInWithMicrosoft,
   },
-  {
+})
-    id: "EMAIL",
-    icon: IconEmail,
-    label: t("auth.continue_with_email"),
-    action: () => {
-      mode.value = "email"
-    },
-    isLoading: signingInWithEmail,
-  },
-]
-
-const allowedAuthProvidersIDsString: string | undefined = import.meta.env
-  .VITE_ALLOWED_AUTH_PROVIDERS
-
-const allowedAuthProvidersIDs = allowedAuthProvidersIDsString
-  ? allowedAuthProvidersIDsString.split(",")
-  : []
-
-const allowedAuthProviders =
-  allowedAuthProvidersIDs.length > 0
-    ? authProviders.filter((provider) =>
-        allowedAuthProvidersIDs.includes(provider.id)
-      )
-    : authProviders
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <span class="flex items-center">
         <label class="font-semibold truncate text-secondaryLight">
@@ -32,7 +32,7 @@
                 :active="authName === 'None'"
                 @click="
                   () => {
-                    auth.authType = 'none'
+                    authType = 'none'
                     hide()
                   }
                 "
@@ -43,7 +43,7 @@
                 :active="authName === 'Basic Auth'"
                 @click="
                   () => {
-                    auth.authType = 'basic'
+                    authType = 'basic'
                     hide()
                   }
                 "
@@ -54,7 +54,7 @@
                 :active="authName === 'Bearer'"
                 @click="
                   () => {
-                    auth.authType = 'bearer'
+                    authType = 'bearer'
                     hide()
                   }
                 "
@@ -65,7 +65,7 @@
                 :active="authName === 'OAuth 2.0'"
                 @click="
                   () => {
-                    auth.authType = 'oauth-2'
+                    authType = 'oauth-2'
                     hide()
                   }
                 "
@@ -76,7 +76,7 @@
                 :active="authName === 'API key'"
                 @click="
                   () => {
-                    auth.authType = 'api-key'
+                    authType = 'api-key'
                     hide()
                   }
                 "
@@ -90,8 +90,8 @@
           :on="!URLExcludes.auth"
           @change="setExclude('auth', !$event)"
         >
-          {{ $t("authorization.include_in_url") }}
+          {{ t("authorization.include_in_url") }}
-        </HoppSmartCheckbox>-->
+        </HoppSmartCheckbox> -->
         <HoppSmartCheckbox
           :on="authActive"
           class="px-2"
@@ -115,7 +115,7 @@
       </div>
     </div>
     <HoppSmartPlaceholder
-      v-if="auth.authType === 'none'"
+      v-if="authType === 'none'"
       :src="`/images/states/${colorMode.value}/login.svg`"
       :alt="`${t('empty.authorization')}`"
       :text="t('empty.authorization')"
@@ -127,47 +127,114 @@
         blank
         :icon="IconExternalLink"
         reverse
+        class="mb-4"
       />
     </HoppSmartPlaceholder>
     <div v-else class="flex flex-1 border-b border-dividerLight">
       <div class="w-2/3 border-r border-dividerLight">
-        <div v-if="auth.authType === 'basic'">
+        <div v-if="authType === 'basic'">
           <div class="flex flex-1 border-b border-dividerLight">
             <SmartEnvInput
-              v-model="auth.username"
+              v-model="basicUsername"
               :environment-highlights="false"
               :placeholder="t('authorization.username')"
             />
           </div>
           <div class="flex flex-1 border-b border-dividerLight">
             <SmartEnvInput
-              v-model="auth.password"
+              v-model="basicPassword"
               :environment-highlights="false"
               :placeholder="t('authorization.password')"
             />
           </div>
         </div>
-        <div v-if="auth.authType === 'bearer'">
+        <div v-if="authType === 'bearer'">
           <div class="flex flex-1 border-b border-dividerLight">
             <SmartEnvInput
-              v-model="auth.token"
+              v-model="bearerToken"
               :environment-highlights="false"
               placeholder="Token"
             />
           </div>
         </div>
-        <div v-if="auth.authType === 'oauth-2'">
+        <div v-if="authType === 'oauth-2'">
           <div class="flex flex-1 border-b border-dividerLight">
             <SmartEnvInput
-              v-model="auth.token"
+              v-model="oauth2Token"
               :environment-highlights="false"
               placeholder="Token"
             />
           </div>
-          <HttpOAuth2Authorization v-model="auth" />
+          <HttpOAuth2Authorization />
+        </div>
+        <div v-if="authType === 'api-key'">
+          <div class="flex flex-1 border-b border-dividerLight">
+            <SmartEnvInput
+              v-model="apiKey"
+              :environment-highlights="false"
+              placeholder="Key"
+            />
+          </div>
+          <div class="flex flex-1 border-b border-dividerLight">
+            <SmartEnvInput
+              v-model="apiValue"
+              :environment-highlights="false"
+              placeholder="Value"
+            />
+          </div>
+          <div class="flex items-center border-b border-dividerLight">
+            <span class="flex items-center">
+              <label class="ml-4 text-secondaryLight">
+                {{ t("authorization.pass_key_by") }}
+              </label>
+              <tippy
+                interactive
+                trigger="click"
+                theme="popover"
+                :on-shown="() => authTippyActions.focus()"
+              >
+                <span class="select-wrapper">
+                  <HoppButtonSecondary
+                    :label="addTo || t('state.none')"
+                    class="pr-8 ml-2 rounded-none"
+                  />
+                </span>
+                <template #content="{ hide }">
+                  <div
+                    ref="authTippyActions"
+                    class="flex flex-col focus:outline-none"
+                    tabindex="0"
+                    @keyup.escape="hide()"
+                  >
+                    <HoppSmartItem
+                      :icon="addTo === 'Headers' ? IconCircleDot : IconCircle"
+                      :active="addTo === 'Headers'"
+                      :label="'Headers'"
+                      @click="
+                        () => {
+                          addTo = 'Headers'
+                          hide()
+                        }
+                      "
+                    />
+                    <HoppSmartItem
+                      :icon="
+                        addTo === 'Query params' ? IconCircleDot : IconCircle
+                      "
+                      :active="addTo === 'Query params'"
+                      :label="'Query params'"
+                      @click="
+                        () => {
+                          addTo = 'Query params'
+                          hide()
+                        }
+                      "
+                    />
+                  </div>
+                </template>
+              </tippy>
+            </span>
           </div>
-        <div v-if="auth.authType === 'api-key'">
-          <HttpAuthorizationApiKey v-model="auth" />
         </div>
       </div>
       <div
@@ -190,45 +257,55 @@
 </template>
 
 <script setup lang="ts">
-import IconHelpCircle from "~icons/lucide/help-circle"
+import { computed, ref, Ref } from "vue"
+import {
+  HoppGQLAuthAPIKey,
+  HoppGQLAuthBasic,
+  HoppGQLAuthBearer,
+  HoppGQLAuthOAuth2,
+} from "@hoppscotch/data"
+
+import { pluckRef } from "@composables/ref"
+import { useStream } from "@composables/stream"
+import { useI18n } from "@composables/i18n"
+import { useColorMode } from "@composables/theming"
+import { gqlAuth$, setGQLAuth } from "~/newstore/GQLSession"
+
 import IconTrash2 from "~icons/lucide/trash-2"
+import IconHelpCircle from "~icons/lucide/help-circle"
 import IconExternalLink from "~icons/lucide/external-link"
 import IconCircleDot from "~icons/lucide/circle-dot"
 import IconCircle from "~icons/lucide/circle"
-import { computed, ref } from "vue"
-import { HoppGQLAuth } from "@hoppscotch/data"
-import { pluckRef } from "@composables/ref"
-import { useI18n } from "@composables/i18n"
-import { useColorMode } from "@composables/theming"
-import { useVModel } from "@vueuse/core"
 
 const t = useI18n()
-
 const colorMode = useColorMode()
 
-const props = defineProps<{
+const auth = useStream(
-  modelValue: HoppGQLAuth
+  gqlAuth$,
-}>()
+  { authType: "none", authActive: true },
-
+  setGQLAuth
-const emit = defineEmits<{
-  (e: "update:modelValue", value: HoppGQLAuth): void
-}>()
-
-const auth = useVModel(props, "modelValue", emit)
-
-const AUTH_KEY_NAME = {
-  basic: "Basic Auth",
-  bearer: "Bearer",
-  "oauth-2": "OAuth 2.0",
-  "api-key": "API key",
-  none: "None",
-} as const
-
-const authType = pluckRef(auth, "authType")
-const authName = computed(() =>
-  AUTH_KEY_NAME[authType.value] ? AUTH_KEY_NAME[authType.value] : "None"
 )
+const authType = pluckRef(auth, "authType")
+const authName = computed(() => {
+  if (authType.value === "basic") return "Basic Auth"
+  else if (authType.value === "bearer") return "Bearer"
+  else if (authType.value === "oauth-2") return "OAuth 2.0"
+  else if (authType.value === "api-key") return "API key"
+  else return "None"
+})
 const authActive = pluckRef(auth, "authActive")
+const basicUsername = pluckRef(auth as Ref<HoppGQLAuthBasic>, "username")
+const basicPassword = pluckRef(auth as Ref<HoppGQLAuthBasic>, "password")
+const bearerToken = pluckRef(auth as Ref<HoppGQLAuthBearer>, "token")
+const oauth2Token = pluckRef(auth as Ref<HoppGQLAuthOAuth2>, "token")
+const apiKey = pluckRef(auth as Ref<HoppGQLAuthAPIKey>, "key")
+const apiValue = pluckRef(auth as Ref<HoppGQLAuthAPIKey>, "value")
+const addTo = pluckRef(auth as Ref<HoppGQLAuthAPIKey>, "addTo")
+if (typeof addTo.value === "undefined") {
+  addTo.value = "Headers"
+  apiKey.value = ""
+  apiValue.value = ""
+}
 
 const clearContent = () => {
   auth.value = {
@@ -239,4 +316,5 @@ const clearContent = () => {
 
 // Template refs
 const tippyActions = ref<any | null>(null)
+const authTippyActions = ref<any | null>(null)
 </script>

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

@@ -1,430 +0,0 @@
-<template>
-  <div
-    class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between pl-4 border-y bg-primary border-dividerLight"
-  >
-    <label class="font-semibold text-secondaryLight">
-      {{ t("tab.headers") }}
-    </label>
-    <div class="flex">
-      <HoppButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        to="https://docs.hoppscotch.io/documentation/features/graphql-api-testing"
-        blank
-        :title="t('app.wiki')"
-        :icon="IconHelpCircle"
-      />
-      <HoppButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="t('action.clear_all')"
-        :icon="IconTrash2"
-        @click="clearContent()"
-      />
-      <HoppButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="t('state.linewrap')"
-        :class="{ '!text-accent': linewrapEnabled }"
-        :icon="IconWrapText"
-        @click.prevent="linewrapEnabled = !linewrapEnabled"
-      />
-      <HoppButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="t('state.bulk_mode')"
-        :icon="IconEdit"
-        :class="{ '!text-accent': bulkMode }"
-        @click="bulkMode = !bulkMode"
-      />
-      <HoppButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="t('add.new')"
-        :icon="IconPlus"
-        :disabled="bulkMode"
-        @click="addHeader"
-      />
-    </div>
-  </div>
-  <div v-if="bulkMode" ref="bulkEditor" class="flex flex-col flex-1"></div>
-  <div v-else>
-    <draggable
-      v-model="workingHeaders"
-      :item-key="(header: any) => `header-${header.id}`"
-      animation="250"
-      handle=".draggable-handle"
-      draggable=".draggable-content"
-      ghost-class="cursor-move"
-      chosen-class="bg-primaryLight"
-      drag-class="cursor-grabbing"
-    >
-      <template #item="{ element: header, index }">
-        <div
-          class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
-        >
-          <span>
-            <HoppButtonSecondary
-              v-tippy="{
-                theme: 'tooltip',
-                delay: [500, 20],
-                content:
-                  index !== workingHeaders?.length - 1
-                    ? t('action.drag_to_reorder')
-                    : null,
-              }"
-              :icon="IconGripVertical"
-              class="cursor-auto text-primary hover:text-primary"
-              :class="{
-                'draggable-handle group-hover:text-secondaryLight !cursor-grab':
-                  index !== workingHeaders?.length - 1,
-              }"
-              tabindex="-1"
-            />
-          </span>
-          <HoppSmartAutoComplete
-            :placeholder="`${t('count.header', { count: index + 1 })}`"
-            :source="commonHeaders"
-            :spellcheck="false"
-            :value="header.key"
-            autofocus
-            styles="
-                bg-transparent
-                flex
-                flex-1
-                py-1
-                px-4
-                truncate
-              "
-            class="flex-1 !flex"
-            @input="
-              updateHeader(index, {
-                id: header.id,
-                key: $event,
-                value: header.value,
-                active: header.active,
-              })
-            "
-          />
-          <input
-            class="flex flex-1 px-4 py-2 bg-transparent"
-            :placeholder="`${t('count.value', { count: index + 1 })}`"
-            :name="`value ${String(index)}`"
-            :value="header.value"
-            autofocus
-            @change="
-              updateHeader(index, {
-                id: header.id,
-                key: header.key,
-                value: ($event!.target! as HTMLInputElement).value,
-                active: header.active,
-              })
-            "
-          />
-          <span>
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="
-                header.hasOwnProperty('active')
-                  ? header.active
-                    ? t('action.turn_off')
-                    : t('action.turn_on')
-                  : t('action.turn_off')
-              "
-              :icon="
-                header.hasOwnProperty('active')
-                  ? header.active
-                    ? IconCheckCircle
-                    : IconCircle
-                  : IconCheckCircle
-              "
-              color="green"
-              @click="
-                updateHeader(index, {
-                  id: header.id,
-                  key: header.key,
-                  value: header.value,
-                  active: !header.active,
-                })
-              "
-            />
-          </span>
-          <span>
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.remove')"
-              :icon="IconTrash"
-              color="red"
-              @click="deleteHeader(index)"
-            />
-          </span>
-        </div>
-      </template>
-    </draggable>
-    <HoppSmartPlaceholder
-      v-if="workingHeaders.length === 0"
-      :src="`/images/states/${colorMode.value}/add_category.svg`"
-      :alt="`${t('empty.headers')}`"
-      :text="t('empty.headers')"
-    >
-      <HoppButtonSecondary
-        :label="`${t('add.new')}`"
-        filled
-        :icon="IconPlus"
-        @click="addHeader"
-      />
-    </HoppSmartPlaceholder>
-  </div>
-</template>
-
-<script setup lang="ts">
-import IconHelpCircle from "~icons/lucide/help-circle"
-import IconTrash2 from "~icons/lucide/trash-2"
-import IconEdit from "~icons/lucide/edit"
-import IconPlus from "~icons/lucide/plus"
-import IconGripVertical from "~icons/lucide/grip-vertical"
-import IconCheckCircle from "~icons/lucide/check-circle"
-import IconTrash from "~icons/lucide/trash"
-import IconCircle from "~icons/lucide/circle"
-import IconWrapText from "~icons/lucide/wrap-text"
-import { reactive, ref, watch } from "vue"
-import * as E from "fp-ts/Either"
-import * as O from "fp-ts/Option"
-import * as A from "fp-ts/Array"
-import * as RA from "fp-ts/ReadonlyArray"
-import { pipe, flow } from "fp-ts/function"
-import {
-  GQLHeader,
-  rawKeyValueEntriesToString,
-  parseRawKeyValueEntriesE,
-  RawKeyValueEntry,
-  HoppGQLRequest,
-} from "@hoppscotch/data"
-import draggable from "vuedraggable-es"
-import { clone, cloneDeep, isEqual } from "lodash-es"
-import { useColorMode } from "@composables/theming"
-import { useI18n } from "@composables/i18n"
-import { useToast } from "@composables/toast"
-import { commonHeaders } from "~/helpers/headers"
-import { useCodemirror } from "@composables/codemirror"
-import { objRemoveKey } from "~/helpers/functional/object"
-import { useVModel } from "@vueuse/core"
-
-const colorMode = useColorMode()
-const t = useI18n()
-const toast = useToast()
-
-// v-model integration with props and emit
-const props = defineProps<{ modelValue: HoppGQLRequest }>()
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: HoppGQLRequest): void
-}>()
-
-const request = useVModel(props, "modelValue", emit)
-
-const idTicker = ref(0)
-
-const linewrapEnabled = ref(false)
-const bulkMode = ref(false)
-const bulkHeaders = ref("")
-
-const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
-
-const bulkEditor = ref<any | null>(null)
-
-useCodemirror(
-  bulkEditor,
-  bulkHeaders,
-  reactive({
-    extendedEditorConfig: {
-      mode: "text/x-yaml",
-      placeholder: `${t("state.bulk_mode_placeholder")}`,
-      lineWrapping: linewrapEnabled,
-    },
-    linter: null,
-    completer: null,
-    environmentHighlights: false,
-  })
-)
-
-// The UI representation of the headers list (has the empty end header)
-const workingHeaders = ref<Array<GQLHeader & { id: number }>>([
-  {
-    id: idTicker.value++,
-    key: "",
-    value: "",
-    active: true,
-  },
-])
-
-// Rule: Working Headers always have one empty header or the last element is always an empty header
-watch(workingHeaders, (headersList) => {
-  if (
-    headersList.length > 0 &&
-    headersList[headersList.length - 1].key !== ""
-  ) {
-    workingHeaders.value.push({
-      id: idTicker.value++,
-      key: "",
-      value: "",
-      active: true,
-    })
-  }
-})
-
-// Sync logic between headers and working headers
-watch(
-  props.modelValue.headers,
-  (newHeadersList) => {
-    // Sync should overwrite working headers
-    const filteredWorkingHeaders = pipe(
-      workingHeaders.value,
-      A.filterMap(
-        flow(
-          O.fromPredicate((e) => e.key !== ""),
-          O.map(objRemoveKey("id"))
-        )
-      )
-    )
-
-    const filteredBulkHeaders = pipe(
-      parseRawKeyValueEntriesE(bulkHeaders.value),
-      E.map(
-        flow(
-          RA.filter((e) => e.key !== ""),
-          RA.toArray
-        )
-      ),
-      E.getOrElse(() => [] as RawKeyValueEntry[])
-    )
-
-    if (!isEqual(newHeadersList, filteredWorkingHeaders)) {
-      workingHeaders.value = pipe(
-        newHeadersList,
-        A.map((x) => ({ id: idTicker.value++, ...x }))
-      )
-    }
-
-    if (!isEqual(newHeadersList, filteredBulkHeaders)) {
-      bulkHeaders.value = rawKeyValueEntriesToString(newHeadersList)
-    }
-  },
-  { immediate: true }
-)
-
-watch(workingHeaders, (newWorkingHeaders) => {
-  const fixedHeaders = pipe(
-    newWorkingHeaders,
-    A.filterMap(
-      flow(
-        O.fromPredicate((e) => e.key !== ""),
-        O.map(objRemoveKey("id"))
-      )
-    )
-  )
-
-  if (!isEqual(request.value.headers, fixedHeaders)) {
-    request.value.headers = cloneDeep(fixedHeaders)
-  }
-})
-
-// Bulk Editor Syncing with Working Headers
-watch(bulkHeaders, (newBulkHeaders) => {
-  const filteredBulkHeaders = pipe(
-    parseRawKeyValueEntriesE(newBulkHeaders),
-    E.map(
-      flow(
-        RA.filter((e) => e.key !== ""),
-        RA.toArray
-      )
-    ),
-    E.getOrElse(() => [] as RawKeyValueEntry[])
-  )
-
-  if (!isEqual(request.value.headers, filteredBulkHeaders)) {
-    request.value.headers = filteredBulkHeaders
-  }
-})
-
-watch(workingHeaders, (newHeadersList) => {
-  // If we are in bulk mode, don't apply direct changes
-  if (bulkMode.value) return
-
-  try {
-    const currentBulkHeaders = bulkHeaders.value.split("\n").map((item) => ({
-      key: item.substring(0, item.indexOf(":")).trimLeft().replace(/^#/, ""),
-      value: item.substring(item.indexOf(":") + 1).trimLeft(),
-      active: !item.trim().startsWith("#"),
-    }))
-
-    const filteredHeaders = newHeadersList.filter((x) => x.key !== "")
-
-    if (!isEqual(currentBulkHeaders, filteredHeaders)) {
-      bulkHeaders.value = rawKeyValueEntriesToString(filteredHeaders)
-    }
-  } catch (e) {
-    toast.error(`${t("error.something_went_wrong")}`)
-    console.error(e)
-  }
-})
-
-const addHeader = () => {
-  workingHeaders.value.push({
-    id: idTicker.value++,
-    key: "",
-    value: "",
-    active: true,
-  })
-}
-
-const updateHeader = (index: number, header: GQLHeader & { id: number }) => {
-  workingHeaders.value = workingHeaders.value.map((h, i) =>
-    i === index ? header : h
-  )
-}
-
-const deleteHeader = (index: number) => {
-  const headersBeforeDeletion = clone(workingHeaders.value)
-
-  if (
-    !(
-      headersBeforeDeletion.length > 0 &&
-      index === headersBeforeDeletion.length - 1
-    )
-  ) {
-    if (deletionToast.value) {
-      deletionToast.value.goAway(0)
-      deletionToast.value = null
-    }
-
-    deletionToast.value = toast.success(`${t("state.deleted")}`, {
-      action: [
-        {
-          text: `${t("action.undo")}`,
-          onClick: (_: any, toastObject: any) => {
-            workingHeaders.value = headersBeforeDeletion
-            toastObject.goAway(0)
-            deletionToast.value = null
-          },
-        },
-      ],
-
-      onComplete: () => {
-        deletionToast.value = null
-      },
-    })
-  }
-
-  workingHeaders.value.splice(index, 1)
-}
-
-const clearContent = () => {
-  // set headers list to the initial state
-  workingHeaders.value = [
-    {
-      id: idTicker.value++,
-      key: "",
-      value: "",
-      active: true,
-    },
-  ]
-
-  bulkHeaders.value = ""
-}
-</script>