chore: fixed issues with pnpm-lock file

feat: added functionality for admin to revoke team invite

.dockerignore

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

.env.example

@@ -13,6 +13,7 @@ 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"
+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]
+    branches: [main, staging, "release/**"]
   pull_request:
-    branches: [main, staging]
+    branches: [main, staging, "release/**"]
 
 jobs:
   test:

docker-compose.yml

@@ -19,10 +19,12 @@ services:
       - DATABASE_URL=postgresql://postgres:testpass@hoppscotch-db:5432/hoppscotch?connect_timeout=300
       - PORT=3000
     volumes:
-      - ./packages/hoppscotch-backend/:/usr/src/app
+      # 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
+      hoppscotch-db:
+        condition: service_healthy
     ports:
       - "3170:3000"
 
@@ -60,12 +62,20 @@ services:
   # you are using an external postgres instance
   # This will be exposed at port 5432
   hoppscotch-db:
-    image: postgres
+    image: postgres:15
     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
 
 

packages/hoppscotch-backend/package.json

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

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

@@ -411,6 +411,23 @@ 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,6 +11,7 @@ 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,
@@ -181,7 +182,7 @@ export class AdminService {
    * @returns an array team invitations
    */
   async pendingInvitationCountInTeam(teamID: string) {
-    const invitations = await this.teamInvitationService.getAllTeamInvitations(
+    const invitations = await this.teamInvitationService.getTeamInvitations(
       teamID,
     );
 
@@ -257,7 +258,7 @@ export class AdminService {
       if (E.isRight(userInvitation)) {
         await this.teamInvitationService.revokeInvitation(
           userInvitation.right.id,
-        )();
+        );
       }
 
       return E.right(addedUser.right);
@@ -416,4 +417,19 @@ 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/auth/auth.controller.ts

@@ -2,9 +2,9 @@ import {
   Body,
   Controller,
   Get,
+  InternalServerErrorException,
   Post,
   Query,
-  Req,
   Request,
   Res,
   UseGuards,
@@ -19,12 +19,18 @@ 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 { authCookieHandler, throwHTTPErr } from './helper';
+import {
+  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' })
@@ -39,6 +45,9 @@ 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,6 +11,7 @@ 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: [
@@ -26,9 +27,9 @@ import { MicrosoftStrategy } from './strategies/microsoft.strategy';
     AuthService,
     JwtStrategy,
     RTJwtStrategy,
-    GoogleStrategy,
-    GithubStrategy,
-    MicrosoftStrategy,
+    ...(authProviderCheck(AuthProvider.GOOGLE) ? [GoogleStrategy] : []),
+    ...(authProviderCheck(AuthProvider.GITHUB) ? [GithubStrategy] : []),
+    ...(authProviderCheck(AuthProvider.MICROSOFT) ? [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.sendAuthEmail(email, {
+    await this.mailerService.sendEmail(email, {
       template: 'code-your-own',
       variables: {
         inviteeEmail: email,

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

@@ -1,8 +1,20 @@
-import { ExecutionContext, Injectable } from '@nestjs/common';
+import { CanActivate, 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') {
+export class GithubSSOGuard extends AuthGuard('github') implements CanActivate {
+  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,8 +1,20 @@
-import { ExecutionContext, Injectable } from '@nestjs/common';
+import { CanActivate, 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') {
+export class GoogleSSOGuard extends AuthGuard('google') implements CanActivate {
+  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,8 +1,26 @@
-import { ExecutionContext, Injectable } from '@nestjs/common';
+import { CanActivate, 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 extends AuthGuard('microsoft') {
+export class MicrosoftSSOGuard
+  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,10 +1,11 @@
-import { ForbiddenException, HttpException, HttpStatus } from '@nestjs/common';
+import { 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 { COOKIES_NOT_FOUND } from 'src/errors';
+import { AUTH_PROVIDER_NOT_SPECIFIED, COOKIES_NOT_FOUND } from 'src/errors';
+import { throwErr } from 'src/utils';
 
 enum AuthTokenType {
   ACCESS_TOKEN = 'access_token',
@@ -16,6 +17,13 @@ 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
@@ -97,3 +105,25 @@ export const subscriptionContextCookieParser = (rawCookies: string) => {
     refresh_token: cookies[AuthTokenType.REFRESH_TOKEN],
   };
 };
+
+/**
+ * Check to see if given auth provider is present in the 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.ALLOWED_AUTH_PROVIDERS
+    ? process.env.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,6 +22,30 @@ 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 "ALLOWED_AUTH_PROVIDERS" is not present in .env file
+ */
+export const ENV_NOT_FOUND_KEY_AUTH_PROVIDERS =
+  '"ALLOWED_AUTH_PROVIDERS" is not present in .env file';
+
+/**
+ * Environment variable "ALLOWED_AUTH_PROVIDERS" is empty in .env file
+ */
+export const ENV_EMPTY_AUTH_PROVIDERS =
+  '"ALLOWED_AUTH_PROVIDERS" is empty in .env file';
+
+/**
+ * Environment variable "ALLOWED_AUTH_PROVIDERS" contains unsupported provider in .env file
+ */
+export const ENV_NOT_SUPPORT_AUTH_PROVIDERS =
+  '"ALLOWED_AUTH_PROVIDERS" contains an unsupported auth provider in .env file';
+
 /**
  * Tried to delete a user data document from fb firestore but failed.
  * (FirebaseService)
@@ -312,6 +336,13 @@ 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,7 +5,6 @@ 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';
 
@@ -35,33 +34,14 @@ export class MailerService {
 
   /**
    * Sends an email to the given email address given a mail description
-   * @param to The email address to be sent to (NOTE: this is not validated)
+   * @param to Receiver's email id
    * @param mailDesc Definition of what email to be sent
+   * @returns Response if email was send successfully or not
    */
-  sendMail(
+  async sendEmail(
     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,11 +5,14 @@ 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,15 +1,5 @@
 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,
@@ -19,6 +9,10 @@ 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
@@ -33,50 +27,31 @@ export class GqlTeamEnvTeamGuard implements CanActivate {
     private readonly teamService: TeamService,
   ) {}
 
-  canActivate(context: ExecutionContext): Promise<boolean> {
-    return pipe(
-      TE.Do,
+  async canActivate(context: ExecutionContext): Promise<boolean> {
+    const requireRoles = this.reflector.get<TeamMemberRole[]>(
+      'requiresTeamRole',
+      context.getHandler(),
+    );
+    if (!requireRoles) throw new Error(BUG_TEAM_ENV_GUARD_NO_REQUIRE_ROLES);
 
-      TE.bindW('requiredRoles', () =>
-        pipe(
-          getAnnotatedRequiredRoles(this.reflector, context),
-          TE.fromOption(() => BUG_TEAM_ENV_GUARD_NO_REQUIRE_ROLES),
-        ),
-      ),
+    const gqlExecCtx = GqlExecutionContext.create(context);
 
-      TE.bindW('user', () =>
-        pipe(
-          getUserFromGQLContext(context),
-          TE.fromOption(() => BUG_AUTH_NO_USER_CTX),
-        ),
-      ),
+    const { user } = gqlExecCtx.getContext().req;
+    if (user == undefined) throw new Error(BUG_AUTH_NO_USER_CTX);
 
-      TE.bindW('envID', () =>
-        pipe(
-          getGqlArg('id', context),
-          O.fromPredicate(S.isString),
-          TE.fromOption(() => BUG_TEAM_ENV_GUARD_NO_ENV_ID),
-        ),
-      ),
+    const { id } = gqlExecCtx.getArgs<{ id: string }>();
+    if (!id) throwErr(BUG_TEAM_ENV_GUARD_NO_ENV_ID);
 
-      TE.bindW('membership', ({ envID, user }) =>
-        pipe(
-          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 teamEnvironment =
+      await this.teamEnvironmentService.getTeamEnvironment(id);
+    if (E.isLeft(teamEnvironment)) throwErr(TEAM_ENVIRONMENT_NOT_FOUND);
 
-      TE.map(({ membership, requiredRoles }) =>
-        requiredRoles.includes(membership.role),
-      ),
+    const member = await this.teamService.getTeamMember(
+      teamEnvironment.right.teamID,
+      user.uid,
+    );
+    if (!member) throwErr(TEAM_ENVIRONMENT_NOT_TEAM_MEMBER);
 
-      TE.getOrElse(throwErr),
-    )();
+    return requireRoles.includes(member.role);
   }
 }

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

@@ -0,0 +1,41 @@
+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,6 +13,11 @@ 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')
@@ -29,29 +34,18 @@ export class TeamEnvironmentsResolver {
   })
   @UseGuards(GqlAuthGuard, GqlTeamMemberGuard)
   @RequiresTeamRole(TeamMemberRole.OWNER, TeamMemberRole.EDITOR)
-  createTeamEnvironment(
-    @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,
+  async createTeamEnvironment(
+    @Args() args: CreateTeamEnvironmentArgs,
   ): Promise<TeamEnvironment> {
-    return this.teamEnvironmentsService.createTeamEnvironment(
-      name,
-      teamID,
-      variables,
-    )();
+    const teamEnvironment =
+      await this.teamEnvironmentsService.createTeamEnvironment(
+        args.name,
+        args.teamID,
+        args.variables,
+      );
+
+    if (E.isLeft(teamEnvironment)) throwErr(teamEnvironment.left);
+    return teamEnvironment.right;
   }
 
   @Mutation(() => Boolean, {
@@ -59,7 +53,7 @@ export class TeamEnvironmentsResolver {
   })
   @UseGuards(GqlAuthGuard, GqlTeamEnvTeamGuard)
   @RequiresTeamRole(TeamMemberRole.OWNER, TeamMemberRole.EDITOR)
-  deleteTeamEnvironment(
+  async deleteTeamEnvironment(
     @Args({
       name: 'id',
       description: 'ID of the Team Environment',
@@ -67,10 +61,12 @@ export class TeamEnvironmentsResolver {
     })
     id: string,
   ): Promise<boolean> {
-    return pipe(
-      this.teamEnvironmentsService.deleteTeamEnvironment(id),
-      TE.getOrElse(throwErr),
-    )();
+    const isDeleted = await this.teamEnvironmentsService.deleteTeamEnvironment(
+      id,
+    );
+
+    if (E.isLeft(isDeleted)) throwErr(isDeleted.left);
+    return isDeleted.right;
   }
 
   @Mutation(() => TeamEnvironment, {
@@ -79,28 +75,19 @@ export class TeamEnvironmentsResolver {
   })
   @UseGuards(GqlAuthGuard, GqlTeamEnvTeamGuard)
   @RequiresTeamRole(TeamMemberRole.OWNER, TeamMemberRole.EDITOR)
-  updateTeamEnvironment(
-    @Args({
-      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,
+  async updateTeamEnvironment(
+    @Args()
+    args: UpdateTeamEnvironmentArgs,
   ): Promise<TeamEnvironment> {
-    return pipe(
-      this.teamEnvironmentsService.updateTeamEnvironment(id, name, variables),
-      TE.getOrElse(throwErr),
-    )();
+    const updatedTeamEnvironment =
+      await this.teamEnvironmentsService.updateTeamEnvironment(
+        args.id,
+        args.name,
+        args.variables,
+      );
+
+    if (E.isLeft(updatedTeamEnvironment)) throwErr(updatedTeamEnvironment.left);
+    return updatedTeamEnvironment.right;
   }
 
   @Mutation(() => TeamEnvironment, {
@@ -108,7 +95,7 @@ export class TeamEnvironmentsResolver {
   })
   @UseGuards(GqlAuthGuard, GqlTeamEnvTeamGuard)
   @RequiresTeamRole(TeamMemberRole.OWNER, TeamMemberRole.EDITOR)
-  deleteAllVariablesFromTeamEnvironment(
+  async deleteAllVariablesFromTeamEnvironment(
     @Args({
       name: 'id',
       description: 'ID of the Team Environment',
@@ -116,10 +103,13 @@ export class TeamEnvironmentsResolver {
     })
     id: string,
   ): Promise<TeamEnvironment> {
-    return pipe(
-      this.teamEnvironmentsService.deleteAllVariablesFromTeamEnvironment(id),
-      TE.getOrElse(throwErr),
-    )();
+    const teamEnvironment =
+      await this.teamEnvironmentsService.deleteAllVariablesFromTeamEnvironment(
+        id,
+      );
+
+    if (E.isLeft(teamEnvironment)) throwErr(teamEnvironment.left);
+    return teamEnvironment.right;
   }
 
   @Mutation(() => TeamEnvironment, {
@@ -127,7 +117,7 @@ export class TeamEnvironmentsResolver {
   })
   @UseGuards(GqlAuthGuard, GqlTeamEnvTeamGuard)
   @RequiresTeamRole(TeamMemberRole.OWNER, TeamMemberRole.EDITOR)
-  createDuplicateEnvironment(
+  async createDuplicateEnvironment(
     @Args({
       name: 'id',
       description: 'ID of the Team Environment',
@@ -135,10 +125,12 @@ export class TeamEnvironmentsResolver {
     })
     id: string,
   ): Promise<TeamEnvironment> {
-    return pipe(
-      this.teamEnvironmentsService.createDuplicateEnvironment(id),
-      TE.getOrElse(throwErr),
-    )();
+    const res = await this.teamEnvironmentsService.createDuplicateEnvironment(
+      id,
+    );
+
+    if (E.isLeft(res)) throwErr(res.left);
+    return res.right;
   }
 
   /* Subscriptions */

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

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

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

@@ -1,15 +1,14 @@
 import { Injectable } from '@nestjs/common';
-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 { TeamEnvironment as DBTeamEnvironment, 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 { TEAM_ENVIRONMENT_NOT_FOUND } from 'src/errors';
-
+import {
+  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(
@@ -17,219 +16,218 @@ export class TeamEnvironmentsService {
     private readonly pubsub: PubSubService,
   ) {}
 
-  getTeamEnvironment(id: string) {
-    return TO.tryCatch(() =>
-      this.prisma.teamEnvironment.findFirst({
-        where: { id },
+  TITLE_LENGTH = 3;
+
+  /**
+   * 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 },
+        });
+      return E.right(teamEnvironment);
+    } catch (error) {
+      return E.left(TEAM_ENVIRONMENT_NOT_FOUND);
+    }
+  }
+
+  /**
+   *  Create a new TeamEnvironment.
+   *
+   * @param name name of new TeamEnvironment
+   * @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),
+      },
+    });
+
+    const createdTeamEnvironment = this.cast(result);
+
+    this.pubsub.publish(
+      `team_environment/${createdTeamEnvironment.teamID}/created`,
+      createdTeamEnvironment,
+    );
+
+    return E.right(createdTeamEnvironment);
+  }
+
+  /**
+   * Delete a TeamEnvironment.
+   *
+   * @param id TeamEnvironment ID
+   * @returns Either of boolean or error message
+   */
+  async deleteTeamEnvironment(id: string) {
+    try {
+      const result = await this.prisma.teamEnvironment.delete({
+        where: {
+          id: id,
+        },
+      });
+
+      const deletedTeamEnvironment = this.cast(result);
+
+      this.pubsub.publish(
+        `team_environment/${deletedTeamEnvironment.teamID}/deleted`,
+        deletedTeamEnvironment,
+      );
+
+      return E.right(true);
+    } catch (error) {
+      return E.left(TEAM_ENVIRONMENT_NOT_FOUND);
+    }
+  }
+
+  /**
+   * Update a TeamEnvironment.
+   *
+   * @param id TeamEnvironment ID
+   * @param name TeamEnvironment name
+   * @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),
+        },
+      });
+
+      const updatedTeamEnvironment = this.cast(result);
+
+      this.pubsub.publish(
+        `team_environment/${updatedTeamEnvironment.teamID}/updated`,
+        updatedTeamEnvironment,
+      );
+
+      return E.right(updatedTeamEnvironment);
+    } catch (error) {
+      return E.left(TEAM_ENVIRONMENT_NOT_FOUND);
+    }
+  }
+
+  /**
+   * Clear contents of a TeamEnvironment.
+   *
+   * @param id TeamEnvironment ID
+   * @returns Either of a TeamEnvironment or error message
+   */
+  async deleteAllVariablesFromTeamEnvironment(id: string) {
+    try {
+      const result = await this.prisma.teamEnvironment.update({
+        where: { id: id },
+        data: {
+          variables: [],
+        },
+      });
+
+      const teamEnvironment = this.cast(result);
+
+      this.pubsub.publish(
+        `team_environment/${teamEnvironment.teamID}/updated`,
+        teamEnvironment,
+      );
+
+      return E.right(teamEnvironment);
+    } catch (error) {
+      return E.left(TEAM_ENVIRONMENT_NOT_FOUND);
+    }
+  }
+
+  /**
+   * Create a duplicate of a existing TeamEnvironment.
+   *
+   * @param id TeamEnvironment ID
+   * @returns Either of a TeamEnvironment or error message
+   */
+  async createDuplicateEnvironment(id: string) {
+    try {
+      const environment = await this.prisma.teamEnvironment.findFirst({
+        where: {
+          id: id,
+        },
         rejectOnNotFound: true,
-      }),
-    );
+      });
+
+      const result = await this.prisma.teamEnvironment.create({
+        data: {
+          name: environment.name,
+          teamID: environment.teamID,
+          variables: environment.variables as Prisma.JsonArray,
+        },
+      });
+
+      const duplicatedTeamEnvironment = this.cast(result);
+
+      this.pubsub.publish(
+        `team_environment/${duplicatedTeamEnvironment.teamID}/created`,
+        duplicatedTeamEnvironment,
+      );
+
+      return E.right(duplicatedTeamEnvironment);
+    } catch (error) {
+      return E.left(TEAM_ENVIRONMENT_NOT_FOUND);
+    }
   }
 
-  createTeamEnvironment(name: string, teamID: string, variables: string) {
-    return pipe(
-      () =>
-        this.prisma.teamEnvironment.create({
-          data: {
-            name: name,
-            teamID: teamID,
-            variables: JSON.parse(variables),
-          },
-        }),
-      T.chainFirst(
-        (environment) => () =>
-          this.pubsub.publish(
-            `team_environment/${environment.teamID}/created`,
-            <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),
-        };
-      }),
-    );
-  }
+  /**
+   * Fetch all TeamEnvironments of a team.
+   *
+   * @param teamID teamID of new TeamEnvironment
+   * @returns List of TeamEnvironments
+   */
+  async fetchAllTeamEnvironments(teamID: string) {
+    const result = await this.prisma.teamEnvironment.findMany({
+      where: {
+        teamID: teamID,
+      },
+    });
+    const teamEnvironments = result.map((item) => {
+      return this.cast(item);
+    });
 
-  deleteTeamEnvironment(id: string) {
-    return pipe(
-      TE.tryCatch(
-        () =>
-          this.prisma.teamEnvironment.delete({
-            where: {
-              id: id,
-            },
-          }),
-        () => TEAM_ENVIRONMENT_NOT_FOUND,
-      ),
-      TE.chainFirst((environment) =>
-        TE.fromTask(() =>
-          this.pubsub.publish(
-            `team_environment/${environment.teamID}/deleted`,
-            <TeamEnvironment>{
-              id: environment.id,
-              name: environment.name,
-              teamID: environment.teamID,
-              variables: JSON.stringify(environment.variables),
-            },
-          ),
-        ),
-      ),
-      TE.map((data) => true),
-    );
-  }
-
-  updateTeamEnvironment(id: string, name: string, variables: string) {
-    return pipe(
-      TE.tryCatch(
-        () =>
-          this.prisma.teamEnvironment.update({
-            where: { id: id },
-            data: {
-              name,
-              variables: JSON.parse(variables),
-            },
-          }),
-        () => TEAM_ENVIRONMENT_NOT_FOUND,
-      ),
-      TE.chainFirst((environment) =>
-        TE.fromTask(() =>
-          this.pubsub.publish(
-            `team_environment/${environment.teamID}/updated`,
-            <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),
-          },
-      ),
-    );
-  }
-
-  deleteAllVariablesFromTeamEnvironment(id: string) {
-    return pipe(
-      TE.tryCatch(
-        () =>
-          this.prisma.teamEnvironment.update({
-            where: { id: id },
-            data: {
-              variables: [],
-            },
-          }),
-        () => TEAM_ENVIRONMENT_NOT_FOUND,
-      ),
-      TE.chainFirst((environment) =>
-        TE.fromTask(() =>
-          this.pubsub.publish(
-            `team_environment/${environment.teamID}/updated`,
-            <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),
-          },
-      ),
-    );
-  }
-
-  createDuplicateEnvironment(id: string) {
-    return pipe(
-      TE.tryCatch(
-        () =>
-          this.prisma.teamEnvironment.findFirst({
-            where: {
-              id: id,
-            },
-            rejectOnNotFound: true,
-          }),
-        () => TEAM_ENVIRONMENT_NOT_FOUND,
-      ),
-      TE.chain((environment) =>
-        TE.fromTask(() =>
-          this.prisma.teamEnvironment.create({
-            data: {
-              name: environment.name,
-              teamID: environment.teamID,
-              variables: environment.variables as Prisma.JsonArray,
-            },
-          }),
-        ),
-      ),
-      TE.chainFirst((environment) =>
-        TE.fromTask(() =>
-          this.pubsub.publish(
-            `team_environment/${environment.teamID}/created`,
-            <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),
-          },
-      ),
-    );
-  }
-
-  fetchAllTeamEnvironments(teamID: string) {
-    return pipe(
-      () =>
-        this.prisma.teamEnvironment.findMany({
-          where: {
-            teamID: teamID,
-          },
-        }),
-      T.map(
-        A.map(
-          (environment) =>
-            <TeamEnvironment>{
-              id: environment.id,
-              name: environment.name,
-              teamID: environment.teamID,
-              variables: JSON.stringify(environment.variables),
-            },
-        ),
-      ),
-    );
+    return teamEnvironments;
   }
 
   /**

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

@@ -0,0 +1,20 @@
+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,15 +12,10 @@ 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 { 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 { 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';
@@ -36,6 +31,8 @@ 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)
@@ -79,8 +76,8 @@ export class TeamInvitationResolver {
       'Gets the Team Invitation with the given ID, or null if not exists',
   })
   @UseGuards(GqlAuthGuard, TeamInviteViewerGuard)
-  teamInvitation(
-    @GqlUser() user: User,
+  async teamInvitation(
+    @GqlUser() user: AuthUser,
     @Args({
       name: 'inviteID',
       description: 'ID of the Team Invitation to lookup',
@@ -88,17 +85,11 @@ export class TeamInvitationResolver {
     })
     inviteID: string,
   ): Promise<TeamInvitation> {
-    return pipe(
-      this.teamInvitationService.getInvitation(inviteID),
-      TE.fromTaskOption(() => TEAM_INVITE_NO_INVITE_FOUND),
-      TE.chainW(
-        TE.fromPredicate(
-          (a) => a.inviteeEmail.toLowerCase() === user.email?.toLowerCase(),
-          () => TEAM_INVITE_EMAIL_DO_NOT_MATCH,
-        ),
-      ),
-      TE.getOrElse(throwErr),
-    )();
+    const teamInvitation = await this.teamInvitationService.getInvitation(
+      inviteID,
+    );
+    if (O.isNone(teamInvitation)) throwErr(TEAM_INVITE_NO_INVITE_FOUND);
+    return teamInvitation.value;
   }
 
   @Mutation(() => TeamInvitation, {
@@ -106,56 +97,19 @@ export class TeamInvitationResolver {
   })
   @UseGuards(GqlAuthGuard, GqlTeamMemberGuard)
   @RequiresTeamRole(TeamMemberRole.OWNER)
-  createTeamInvitation(
-    @GqlUser()
-    user: User,
-
-    @Args({
-      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,
+  async createTeamInvitation(
+    @GqlUser() user: AuthUser,
+    @Args() args: CreateTeamInvitationArgs,
   ): Promise<TeamInvitation> {
-    return pipe(
-      TE.Do,
+    const teamInvitation = await this.teamInvitationService.createInvitation(
+      user,
+      args.teamID,
+      args.inviteeEmail,
+      args.inviteeRole,
+    );
 
-      // 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),
-    )();
+    if (E.isLeft(teamInvitation)) throwErr(teamInvitation.left);
+    return teamInvitation.right;
   }
 
   @Mutation(() => Boolean, {
@@ -163,7 +117,7 @@ export class TeamInvitationResolver {
   })
   @UseGuards(GqlAuthGuard, TeamInviteTeamOwnerGuard)
   @RequiresTeamRole(TeamMemberRole.OWNER)
-  revokeTeamInvitation(
+  async revokeTeamInvitation(
     @Args({
       name: 'inviteID',
       type: () => ID,
@@ -171,19 +125,19 @@ export class TeamInvitationResolver {
     })
     inviteID: string,
   ): Promise<true> {
-    return pipe(
-      this.teamInvitationService.revokeInvitation(inviteID),
-      TE.map(() => true as const),
-      TE.getOrElse(throwErr),
-    )();
+    const isRevoked = await this.teamInvitationService.revokeInvitation(
+      inviteID,
+    );
+    if (E.isLeft(isRevoked)) throwErr(isRevoked.left);
+    return true;
   }
 
   @Mutation(() => TeamMember, {
     description: 'Accept an Invitation',
   })
   @UseGuards(GqlAuthGuard, TeamInviteeGuard)
-  acceptTeamInvitation(
-    @GqlUser() user: User,
+  async acceptTeamInvitation(
+    @GqlUser() user: AuthUser,
     @Args({
       name: 'inviteID',
       type: () => ID,
@@ -191,10 +145,12 @@ export class TeamInvitationResolver {
     })
     inviteID: string,
   ): Promise<TeamMember> {
-    return pipe(
-      this.teamInvitationService.acceptInvitation(inviteID, user),
-      TE.getOrElse(throwErr),
-    )();
+    const teamMember = await this.teamInvitationService.acceptInvitation(
+      inviteID,
+      user,
+    );
+    if (E.isLeft(teamMember)) throwErr(teamMember.left);
+    return teamMember.right;
   }
 
   // Subscriptions

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

@@ -1,27 +1,25 @@
 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 { Team, TeamMemberRole } from 'src/team/team.model';
-import { Email } from 'src/types/Email';
-import { User } from 'src/user/user.model';
+import { TeamInvitation as DBTeamInvitation } from '@prisma/client';
+import { TeamMember, TeamMemberRole } from 'src/team/team.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 {
@@ -32,38 +30,37 @@ 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> {
-    return pipe(
-      () =>
-        this.prisma.teamInvitation.findUnique({
-          where: {
-            id: inviteID,
-          },
-        }),
-      TO.fromTask,
-      TO.chain(flow(O.fromNullable, TO.fromOption)),
-      TO.map((x) => x as TeamInvitation),
-    );
-  }
+  /**
+   * Get the team invite
+   * @param inviteID invite id
+   * @returns an Option of team invitation or none
+   */
+  async getInvitation(inviteID: string) {
+    try {
+      const dbInvitation = await this.prisma.teamInvitation.findUniqueOrThrow({
+        where: {
+          id: inviteID,
+        },
+      });
 
-  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)),
-    );
+      return O.some(this.cast(dbInvitation));
+    } catch (e) {
+      return O.none;
+    }
   }
 
   /**
@@ -92,211 +89,162 @@ export class TeamInvitationService {
     }
   }
 
-  createInvitation(
-    creator: User,
-    team: Team,
-    inviteeEmail: Email,
+  /**
+   * Create a team invitation
+   * @param creator creator of the invitation
+   * @param teamID team id
+   * @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,
   ) {
-    return pipe(
-      // Perform all validation checks
-      TE.sequenceArray([
-        // creator should be a TeamMember
-        pipe(
-          this.teamService.getTeamMemberTE(team.id, creator.uid),
-          TE.map(constVoid),
-        ),
+    // validate email
+    const isEmailValid = validateEmail(inviteeEmail);
+    if (!isEmailValid) return E.left(INVALID_EMAIL);
 
-        // Invitee should not be a team member
-        pipe(
-          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),
-        ),
+    // team ID should valid
+    const team = await this.teamService.getTeamWithID(teamID);
+    if (!team) return E.left(TEAM_INVALID_ID);
 
-        // Should not have an existing invite
-        pipe(
-          this.getInvitationWithEmail(inviteeEmail, team),
-          TE.fromTaskOption(() => null),
-          TE.swap,
-          TE.map(constVoid),
-          TE.mapLeft(() => TEAM_INVITE_MEMBER_HAS_INVITE),
-        ),
-      ]),
-
-      // Create the invitation
-      TE.chainTaskK(
-        () => () =>
-          this.prisma.teamInvitation.create({
-            data: {
-              teamID: team.id,
-              inviteeEmail,
-              inviteeRole,
-              creatorUid: creator.uid,
-            },
-          }),
-      ),
-
-      // 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=${invitation.id}`,
-              invite_team_name: team.name,
-            },
-          }),
-
-          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
-        ),
-      ),
-
-      // 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),
+    // invitation creator should be a TeamMember
+    const isTeamMember = await this.teamService.getTeamMember(
+      team.id,
+      creator.uid,
     );
-  }
+    if (!isTeamMember) return E.left(TEAM_MEMBER_NOT_FOUND);
 
-  revokeInvitation(inviteID: string) {
-    return pipe(
-      // Make sure invite exists
-      this.getInvitation(inviteID),
-      TE.fromTaskOption(() => TEAM_INVITE_NO_INVITE_FOUND),
+    // Checking to see if the invitee is already part of the team or not
+    const inviteeUser = await this.userService.findUserByEmail(inviteeEmail);
+    if (O.isSome(inviteeUser)) {
+      // invitee should not already a member
+      const isTeamMember = await this.teamService.getTeamMember(
+        team.id,
+        inviteeUser.value.uid,
+      );
+      if (isTeamMember) return E.left(TEAM_INVITE_ALREADY_MEMBER);
+    }
 
-      // Delete team invitation
-      TE.chainTaskK(
-        () => () =>
-          this.prisma.teamInvitation.delete({
-            where: {
-              id: inviteID,
-            },
-          }),
-      ),
-
-      // Emit Pubsub Event
-      TE.chainFirst((invitation) =>
-        TE.fromTask(() =>
-          this.pubsub.publish(
-            `team/${invitation.teamID}/invite_removed`,
-            invitation.id,
-          ),
-        ),
-      ),
-
-      // We are not returning anything
-      TE.map(constVoid),
+    // 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);
 
-  getAllInvitationsInTeam(team: Team) {
-    return pipe(
-      () =>
-        this.prisma.teamInvitation.findMany({
-          where: {
-            teamID: team.id,
-          },
-        }),
-      T.map((x) => x as TeamInvitation[]),
-    );
-  }
+    // create the invitation
+    const dbInvitation = await this.prisma.teamInvitation.create({
+      data: {
+        teamID: team.id,
+        inviteeEmail,
+        inviteeRole,
+        creatorUid: creator.uid,
+      },
+    });
 
-  acceptInvitation(inviteID: string, acceptedBy: User) {
-    return pipe(
-      TE.Do,
+    await this.mailerService.sendEmail(inviteeEmail, {
+      template: 'team-invitation',
+      variables: {
+        invitee: creator.displayName ?? 'A Hoppscotch User',
+        action_url: `${process.env.VITE_BASE_URL}/join-team?id=${dbInvitation.id}`,
+        invite_team_name: team.name,
+      },
+    });
 
-      // First get the invitation
-      TE.bindW('invitation', () =>
-        pipe(
-          this.getInvitation(inviteID),
-          TE.fromTaskOption(() => TEAM_INVITE_NO_INVITE_FOUND),
-        ),
-      ),
+    const invitation = this.cast(dbInvitation);
+    this.pubsub.publish(`team/${invitation.teamID}/invite_added`, invitation);
 
-      // 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),
-    );
+    return E.right(invitation);
   }
 
   /**
-   * Fetch the count invitations for a given team.
-   * @param teamID team id
-   * @returns a count team invitations for a team
+   * Revoke a team invitation
+   * @param inviteID invite id
+   * @returns an Either of true or error message
    */
-  async getAllTeamInvitations(teamID: string) {
-    const invitations = await this.prisma.teamInvitation.findMany({
+  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
+    await this.prisma.teamInvitation.delete({
+      where: {
+        id: inviteID,
+      },
+    });
+
+    this.pubsub.publish(
+      `team/${invitation.value.teamID}/invite_removed`,
+      invitation.value.id,
+    );
+
+    return E.right(true);
+  }
+
+  /**
+   * Accept a team invitation
+   * @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
+   */
+  async getTeamInvitations(teamID: string) {
+    const dbInvitations = 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,48 +24,30 @@ export class TeamInviteTeamOwnerGuard implements CanActivate {
   ) {}
 
   async canActivate(context: ExecutionContext): Promise<boolean> {
-    return pipe(
-      TE.Do,
+    // Get GQL context
+    const gqlExecCtx = GqlExecutionContext.create(context);
 
-      TE.bindW('gqlCtx', () => TE.of(GqlExecutionContext.create(context))),
+    // Get user
+    const { user } = gqlExecCtx.getContext().req;
+    if (!user) throwErr(BUG_AUTH_NO_USER_CTX);
 
-      // Get the invite
-      TE.bindW('invite', ({ gqlCtx }) =>
-        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),
-            ),
-          ),
-        ),
-      ),
+    // Get the invite
+    const { inviteID } = gqlExecCtx.getArgs<{ inviteID: string }>();
+    if (!inviteID) throwErr(BUG_TEAM_INVITE_NO_INVITE_ID);
 
-      TE.bindW('user', ({ gqlCtx }) =>
-        pipe(
-          gqlCtx.getContext().req.user,
-          O.fromNullable,
-          TE.fromOption(() => BUG_AUTH_NO_USER_CTX),
-        ),
-      ),
+    const invitation = await this.teamInviteService.getInvitation(inviteID);
+    if (O.isNone(invitation)) throwErr(TEAM_INVITE_NO_INVITE_FOUND);
 
-      TE.bindW('userMember', ({ invite, user }) =>
-        this.teamService.getTeamMemberTE(invite.teamID, user.uid),
-      ),
+    // Fetch team member details of this user
+    const teamMember = await this.teamService.getTeamMember(
+      invitation.value.teamID,
+      user.uid,
+    );
 
-      TE.chainW(
-        TE.fromPredicate(
-          ({ userMember }) => userMember.role === TeamMemberRole.OWNER,
-          () => TEAM_NOT_REQUIRED_ROLE,
-        ),
-      ),
+    if (!teamMember) throwErr(TEAM_MEMBER_NOT_FOUND);
+    if (teamMember.role !== TeamMemberRole.OWNER)
+      throwErr(TEAM_NOT_REQUIRED_ROLE);
 
-      TE.fold(
-        (err) => throwErr(err),
-        () => T.of(true),
-      ),
-    )();
+    return true;
   }
 }

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

@@ -1,20 +1,23 @@
 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(
@@ -23,50 +26,32 @@ export class TeamInviteViewerGuard implements CanActivate {
   ) {}
 
   async canActivate(context: ExecutionContext): Promise<boolean> {
-    return pipe(
-      TE.Do,
+    // Get GQL context
+    const gqlExecCtx = GqlExecutionContext.create(context);
 
-      // Get GQL Context
-      TE.bindW('gqlCtx', () => TE.of(GqlExecutionContext.create(context))),
+    // Get user
+    const { user } = gqlExecCtx.getContext().req;
+    if (!user) throwErr(BUG_AUTH_NO_USER_CTX);
 
-      // Get user
-      TE.bindW('user', ({ gqlCtx }) =>
-        pipe(
-          O.fromNullable(gqlCtx.getContext().req.user),
-          TE.fromOption(() => BUG_AUTH_NO_USER_CTX),
-        ),
-      ),
+    // Get the invite
+    const { inviteID } = gqlExecCtx.getArgs<{ inviteID: string }>();
+    if (!inviteID) throwErr(BUG_TEAM_INVITE_NO_INVITE_ID);
 
-      // Get the invite
-      TE.bindW('invite', ({ gqlCtx }) =>
-        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);
+    if (O.isNone(invitation)) throwErr(TEAM_INVITE_NO_INVITE_FOUND);
 
-      // Check if the user and the invite email match, else if we can resolver the user as a team member
-      // 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
+    if (
+      user.email?.toLowerCase() !== invitation.value.inviteeEmail.toLowerCase()
+    ) {
+      const teamMember = await this.teamService.getTeamMember(
+        invitation.value.teamID,
+        user.uid,
+      );
 
-      TE.mapLeft((e) =>
-        e === 'team/member_not_found' ? TEAM_INVITE_NOT_VALID_VIEWER : e,
-      ),
+      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,11 +1,7 @@
 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,
@@ -24,44 +20,26 @@ export class TeamInviteeGuard implements CanActivate {
   constructor(private readonly teamInviteService: TeamInvitationService) {}
 
   async canActivate(context: ExecutionContext): Promise<boolean> {
-    return pipe(
-      TE.Do,
+    // Get GQL Context
+    const gqlExecCtx = GqlExecutionContext.create(context);
 
-      // Get execution context
-      TE.bindW('gqlCtx', () => TE.of(GqlExecutionContext.create(context))),
+    // Get user
+    const { user } = gqlExecCtx.getContext().req;
+    if (!user) throwErr(BUG_AUTH_NO_USER_CTX);
 
-      // Get user
-      TE.bindW('user', ({ gqlCtx }) =>
-        pipe(
-          O.fromNullable(gqlCtx.getContext().req.user),
-          TE.fromOption(() => BUG_AUTH_NO_USER_CTX),
-        ),
-      ),
+    // Get the invite
+    const { inviteID } = gqlExecCtx.getArgs<{ inviteID: string }>();
+    if (!inviteID) throwErr(BUG_TEAM_INVITE_NO_INVITE_ID);
 
-      // Get invite
-      TE.bindW('invite', ({ gqlCtx }) =>
-        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);
+    if (O.isNone(invitation)) throwErr(TEAM_INVITE_NO_INVITE_FOUND);
 
-      // Check if the emails match
-      TE.chainW(
-        TE.fromPredicate(
-          ({ user, invite }) => user.email === invite.inviteeEmail,
-          () => TEAM_INVITE_EMAIL_DO_NOT_MATCH,
-        ),
-      ),
+    if (
+      user.email.toLowerCase() !== invitation.value.inviteeEmail.toLowerCase()
+    ) {
+      throwErr(TEAM_INVITE_EMAIL_DO_NOT_MATCH);
+    }
 
-      // Fold it to a promise
-      TE.fold(throwErr, () => T.of(true)),
-    )();
+    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.getAllInvitationsInTeam(team)();
+    return this.teamInviteService.getTeamInvitations(team.id);
   }
 }

packages/hoppscotch-backend/src/utils.ts

@@ -9,7 +9,8 @@ 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 { JSON_INVALID } from './errors';
+import { 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.
@@ -152,3 +153,31 @@ export function isValidLength(title: string, length: number) {
 
   return true;
 }
+
+/**
+ * This function is called by bootstrap() in main.ts
+ *  It checks if the "ALLOWED_AUTH_PROVIDERS" environment variable is properly set or not.
+ * If not, it throws an error.
+ */
+export function checkEnvironmentAuthProvider() {
+  if (!process.env.hasOwnProperty('ALLOWED_AUTH_PROVIDERS')) {
+    throw new Error(ENV_NOT_FOUND_KEY_AUTH_PROVIDERS);
+  }
+
+  if (process.env.ALLOWED_AUTH_PROVIDERS === '') {
+    throw new Error(ENV_EMPTY_AUTH_PROVIDERS);
+  }
+
+  const givenAuthProviders = process.env.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/assets/icons/star-off.svg

@@ -0,0 +1 @@
+<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,6 +4,7 @@
   @apply after:backface-hidden;
   @apply selection:bg-accentDark;
   @apply selection:text-accentContrast;
+  @apply overscroll-none;
 }
 
 :root {

packages/hoppscotch-common/locales/en.json

@@ -4,6 +4,7 @@
     "cancel": "Cancel",
     "choose_file": "Choose a file",
     "clear": "Clear",
+    "clear_history": "Clear All History",
     "clear_all": "Clear all",
     "close": "Close",
     "connect": "Connect",
@@ -150,6 +151,11 @@
     "save_unsaved_tab": "Do you want to save changes made in this tab?",
     "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}",
@@ -173,6 +179,7 @@
     "folder": "Folder is empty",
     "headers": "This request does not have any headers",
     "history": "History is empty",
+    "history_suggestions": "History does not have any matching entries",
     "invites": "Invite list is empty",
     "members": "Team is empty",
     "parameters": "This request does not have any parameters",
@@ -193,16 +200,23 @@
     "created": "Environment created",
     "deleted": "Environment deletion",
     "edit": "Edit Environment",
+    "global": "Global",
     "invalid_name": "Please provide a name for the environment",
     "my_environments": "My Environments",
+    "name": "Name",
     "nested_overflow": "nested environment variables are limited to 10 levels",
     "new": "New Environment",
     "no_environment": "No environment",
     "no_environment_description": "No environments were selected. Choose what to do with the following variables.",
+    "replace_with_variable": "Replace with variable",
+    "scope": "Scope",
     "select": "Select 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": {
@@ -582,6 +596,11 @@
     "log": "Log",
     "url": "URL"
   },
+  "spotlight": {
+    "section": {
+      "user": "User"
+    }
+  },
   "sse": {
     "event_type": "Event type",
     "log": "Log",

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": "組合已建立",
-    "different_parent": "Cannot reorder collection with different parent",
-    "edit": "編輯組合",
-    "invalid_name": "請提供有效的組合名稱",
-    "invalid_root_move": "Collection already in the root",
-    "moved": "Moved Successfully",
-    "my_collections": "我的組合",
-    "name": "我的新組合",
-    "name_length_insufficient": "組合名稱至少要有 3 個字元。",
-    "new": "建立組合",
-    "order_changed": "Collection Order Updated",
-    "renamed": "組合已重新命名",
+    "created": "集合已建立",
+    "different_parent": "無法為父集合不同的集合重新排序",
+    "edit": "編輯集合",
+    "invalid_name": "請提供有效的集合名稱",
+    "invalid_root_move": "集合已在根目錄",
+    "moved": "移動成功",
+    "my_collections": "我的集合",
+    "name": "我的新集合",
+    "name_length_insufficient": "集合名稱至少要有 3 個字元。",
+    "new": "建立集合",
+    "order_changed": "集合順序已更新",
+    "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": "您確定要捨棄當前請求嗎？未儲存的變更將遺失。",
-    "save_unsaved_tab": "Do you want to save changes made in this tab?",
+    "request_change": "您確定要捨棄目前的請求嗎？未儲存的變更將遺失。",
+    "save_unsaved_tab": "您要儲存在此分頁做出的改動嗎？",
     "sync": "您想從雲端恢復您的工作區嗎？這將丟棄您的本地進度。"
   },
   "count": {
@@ -160,13 +160,13 @@
   },
   "documentation": {
     "generate": "產生文件",
-    "generate_message": "匯入 Hoppscotch 組合以隨時隨地產生 API 文件。"
+    "generate_message": "匯入 Hoppscotch 集合以隨時隨地產生 API 文件。"
   },
   "empty": {
     "authorization": "該請求沒有使用任何授權",
     "body": "該請求沒有任何請求主體",
-    "collection": "組合為空",
-    "collections": "組合為空",
+    "collection": "集合為空",
+    "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_my_collections": "從我的組合匯入",
-    "from_my_collections_description": "從我的組合檔匯入",
+    "from_json_description": "從 Hoppscotch 集合檔匯入",
+    "from_my_collections": "從我的集合匯入",
+    "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": "已匯入組合",
-    "json_description": "從 Hoppscotch 組合 JSON 檔匯入組合",
+    "import_from_url_success": "已匯入集合",
+    "json_description": "從 Hoppscotch 集合 JSON 檔匯入集合",
     "title": "匯入"
   },
   "layout": {
-    "collapse_collection": "隱藏或顯示組合",
+    "collapse_collection": "隱藏或顯示集合",
     "collapse_sidebar": "隱藏或顯示側邊欄",
     "column": "垂直版面",
     "name": "配置",
@@ -316,8 +316,8 @@
     "zen_mode": "專注模式"
   },
   "modal": {
-    "close_unsaved_tab": "You have unsaved changes",
-    "collections": "組合",
+    "close_unsaved_tab": "您有未儲存的改動",
+    "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": "Cannot reorder requests from different collections",
-    "duplicated": "Request duplicated",
+    "different_collection": "無法重新排列來自不同集合的請求",
+    "duplicated": "已複製請求",
     "duration": "持續時間",
     "enter_curl": "輸入 cURL",
     "generate_code": "產生程式碼",
@@ -405,10 +405,10 @@
     "header_list": "請求標頭列表",
     "invalid_name": "請提供請求名稱",
     "method": "方法",
-    "moved": "Request moved",
+    "moved": "已移動請求",
     "name": "請求名稱",
     "new": "新請求",
-    "order_changed": "Request Order Updated",
+    "order_changed": "已更新請求順序",
     "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": "Invalid collection ID",
+    "invalid_coll_id": "集合 ID 無效",
     "invalid_email_format": "電子信箱格式無效",
     "invalid_id": "團隊 ID 無效。請聯絡您的團隊擁有者。",
     "invalid_invite_link": "邀請連結無效",
@@ -690,21 +690,21 @@
     "member_removed": "使用者已移除",
     "member_role_updated": "使用者角色已更新",
     "members": "成員",
-    "more_members": "+{count} more",
+    "more_members": "還有 {count} 位",
     "name_length_insufficient": "團隊名稱至少為 6 個字元",
     "name_updated": "團隊名稱已更新",
     "new": "新團隊",
     "new_created": "已建立新團隊",
     "new_name": "我的新團隊",
-    "no_access": "您沒有編輯組合的許可權",
+    "no_access": "您沒有編輯集合的許可權",
     "no_invite_found": "未找到邀請。請聯絡您的團隊擁有者。",
-    "no_request_found": "Request not found.",
+    "no_request_found": "找不到請求。",
     "not_found": "找不到團隊。請聯絡您的團隊擁有者。",
     "not_valid_viewer": "您不是一個有效的檢視者。請聯絡您的團隊擁有者。",
-    "parent_coll_move": "Cannot move collection to a child collection",
+    "parent_coll_move": "無法將集合移動至子集合",
     "pending_invites": "待定邀請",
     "permissions": "許可權",
-    "same_target_destination": "Same target and destination",
+    "same_target_destination": "目標和目的地相同",
     "saved": "團隊已儲存",
     "select_a_team": "選擇團隊",
     "title": "團隊",
@@ -734,9 +734,9 @@
     "url": "網址"
   },
   "workspace": {
-    "change": "Change workspace",
-    "personal": "My Workspace",
-    "team": "Team Workspace",
-    "title": "Workspaces"
+    "change": "切換工作區",
+    "personal": "我的工作區",
+    "team": "團隊工作區",
+    "title": "工作區"
   }
 }

packages/hoppscotch-common/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/common",
   "private": true,
-  "version": "2023.4.7",
+  "version": "2023.4.8",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
     "test": "vitest --run",
@@ -46,7 +46,7 @@
     "@urql/exchange-auth": "^0.1.7",
     "@urql/exchange-graphcache": "^4.4.3",
     "@vitejs/plugin-legacy": "^2.3.0",
-    "@vueuse/core": "^8.7.5",
+    "@vueuse/core": "^8.9.4",
     "@vueuse/head": "^0.7.9",
     "acorn-walk": "^8.2.0",
     "axios": "^0.21.4",
@@ -67,6 +67,7 @@
     "jsonpath-plus": "^7.0.0",
     "lodash-es": "^4.17.21",
     "lossless-json": "^2.0.8",
+    "minisearch": "^6.1.0",
     "nprogress": "^0.2.0",
     "paho-mqtt": "^1.1.0",
     "path": "^0.12.7",
@@ -88,7 +89,6 @@
     "util": "^0.12.4",
     "uuid": "^8.3.2",
     "vue": "^3.2.25",
-    "vue-github-button": "^3.0.3",
     "vue-i18n": "^9.2.2",
     "vue-pdf-embed": "^1.1.4",
     "vue-router": "^4.0.16",
@@ -110,7 +110,7 @@
     "@graphql-codegen/typescript-urql-graphcache": "^2.3.1",
     "@graphql-codegen/urql-introspection": "^2.2.0",
     "@graphql-typed-document-node/core": "^3.1.1",
-    "@iconify-json/lucide": "^1.1.40",
+    "@iconify-json/lucide": "^1.1.109",
     "@intlify/vite-plugin-vue-i18n": "^7.0.0",
     "@relmify/jest-fp-ts": "^2.1.1",
     "@rushstack/eslint-patch": "^1.1.4",
@@ -147,7 +147,7 @@
     "vite-plugin-html-config": "^1.0.10",
     "vite-plugin-inspect": "^0.7.4",
     "vite-plugin-pages": "^0.26.0",
-    "vite-plugin-pages-sitemap": "^1.4.0",
+    "vite-plugin-pages-sitemap": "^1.4.5",
     "vite-plugin-pwa": "^0.13.1",
     "vite-plugin-vue-layouts": "^0.7.0",
     "vite-plugin-windicss": "^1.8.8",

packages/hoppscotch-common/public/badge.svg

@@ -0,0 +1 @@
+<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

@@ -9,22 +9,24 @@ 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']
-    AppFuse: typeof import('./components/app/Fuse.vue')['default']
     AppGitHubStarButton: typeof import('./components/app/GitHubStarButton.vue')['default']
     AppHeader: typeof import('./components/app/Header.vue')['default']
     AppInterceptor: typeof import('./components/app/Interceptor.vue')['default']
     AppLogo: typeof import('./components/app/Logo.vue')['default']
     AppOptions: typeof import('./components/app/Options.vue')['default']
     AppPaneLayout: typeof import('./components/app/PaneLayout.vue')['default']
-    AppPowerSearch: typeof import('./components/app/PowerSearch.vue')['default']
-    AppPowerSearchEntry: typeof import('./components/app/PowerSearchEntry.vue')['default']
     AppShare: typeof import('./components/app/Share.vue')['default']
     AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default']
     AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
     AppShortcutsPrompt: typeof import('./components/app/ShortcutsPrompt.vue')['default']
     AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
+    AppSpotlight: typeof import('./components/app/spotlight/index.vue')['default']
+    AppSpotlightEntry: typeof import('./components/app/spotlight/Entry.vue')['default']
+    AppSpotlightEntryGQLHistory: typeof import('./components/app/spotlight/entry/GQLHistory.vue')['default']
+    AppSpotlightEntryRESTHistory: typeof import('./components/app/spotlight/entry/RESTHistory.vue')['default']
     AppSupport: typeof import('./components/app/Support.vue')['default']
     ButtonPrimary: typeof import('./../../hoppscotch-ui/src/components/button/Primary.vue')['default']
     ButtonSecondary: typeof import('./../../hoppscotch-ui/src/components/button/Secondary.vue')['default']
@@ -53,6 +55,7 @@ declare module '@vue/runtime-core' {
     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']
@@ -74,27 +77,6 @@ declare module '@vue/runtime-core' {
     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']
-    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
-    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
-    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
-    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
-    HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox']
-    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
-    HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']
-    HoppSmartFileChip: typeof import('@hoppscotch/ui')['HoppSmartFileChip']
-    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']
-    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']
-    HoppSmartWindow: typeof import('@hoppscotch/ui')['HoppSmartWindow']
-    HoppSmartWindows: typeof import('@hoppscotch/ui')['HoppSmartWindows']
     HttpAuthorization: typeof import('./components/http/Authorization.vue')['default']
     HttpAuthorizationApiKey: typeof import('./components/http/authorization/ApiKey.vue')['default']
     HttpAuthorizationBasic: typeof import('./components/http/authorization/Basic.vue')['default']
@@ -131,6 +113,7 @@ declare module '@vue/runtime-core' {
     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']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
     LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']

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

@@ -0,0 +1,76 @@
+<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>K</kbd>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>/</kbd>`"
           :icon="IconZap"
           @click="invokeAction('flyouts.keybinds.toggle')"
         />

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

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

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

@@ -15,16 +15,21 @@
           :label="t('app.name')"
           to="/"
         />
-        <!-- <AppGitHubStarButton class="mt-1.5 transition" /> -->
       </div>
-      <div class="inline-flex items-center space-x-2">
-        <HoppButtonSecondary
-          v-tippy="{ theme: 'tooltip', allowHTML: true }"
-          :title="`${t('app.search')} <kbd>/</kbd>`"
-          :icon="IconSearch"
-          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+      <div class="inline-flex items-center justify-center flex-1 space-x-2">
+        <button
+          class="flex flex-1 items-center justify-between px-2 py-1 bg-primaryDark transition text-secondaryLight cursor-text rounded border border-dividerDark max-w-xs hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary"
           @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">
+            <kbd class="shortcut-key">{{ getPlatformSpecialKey() }}</kbd>
+            <kbd class="shortcut-key">K</kbd>
+          </span>
+        </button>
         <HoppButtonSecondary
           v-if="showInstallButton"
           v-tippy="{ theme: 'tooltip' }"
@@ -42,6 +47,8 @@
           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"
@@ -236,17 +243,17 @@ 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"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
-import { invokeAction } from "@helpers/actions"
+import { defineActionHandler, invokeAction } from "@helpers/actions"
 import { workspaceStatus$, updateWorkspaceTeamName } from "~/newstore/workspace"
 import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { onLoggedIn } from "~/composables/auth"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import { getPlatformSpecialKey } from "~/helpers/platformutils"
 
 const t = useI18n()
 
@@ -374,4 +381,12 @@ const profile = ref<any | null>(null)
 const settings = ref<any | null>(null)
 const logout = ref<any | null>(null)
 const accountActions = ref<any | null>(null)
+
+defineActionHandler(
+  "user.login",
+  () => {
+    invokeAction("modals.login.toggle")
+  },
+  computed(() => !currentUser.value)
+)
 </script>

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

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

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

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

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

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

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

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

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

@@ -22,10 +22,11 @@
         </div>
         <div class="flex">
           <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
-          <kbd class="shortcut-key">K</kbd>
+          <kbd class="shortcut-key">/</kbd>
         </div>
         <div class="flex">
-          <kbd class="shortcut-key">/</kbd>
+          <kbd class="shortcut-key">{{ getSpecialKey() }}</kbd>
+          <kbd class="shortcut-key">K</kbd>
         </div>
         <div class="flex">
           <kbd class="shortcut-key">?</kbd>

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,208 @@
+<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="name"
+            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
+  replaceWithVariable: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const hideModal = () => {
+  emit("hide-modal")
+}
+
+watch(
+  () => props.show,
+  (newVal) => {
+    if (!newVal) {
+      scope.value = {
+        type: "global",
+      }
+      name.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 name = ref("")
+
+const addEnvironment = async () => {
+  if (!name.value) {
+    toast.error(`${t("environment.invalid_name")}`)
+    return
+  }
+  if (scope.value.type === "global") {
+    addGlobalEnvVariable({
+      key: name.value,
+      value: props.value,
+    })
+    toast.success(`${t("environment.updated")}`)
+  } else if (scope.value.type === "my-environment") {
+    addEnvironmentVariable(scope.value.index, {
+      key: name.value,
+      value: props.value,
+    })
+    toast.success(`${t("environment.updated")}`)
+  } else {
+    const newVariables = [
+      ...scope.value.environment.environment.variables,
+      {
+        key: name.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 = `<<${name.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

@@ -8,7 +8,7 @@
     <span
       v-tippy="{ theme: 'tooltip' }"
       :title="`${t('environment.select')}`"
-      class="bg-transparent border-b border-dividerLight select-wrapper"
+      class="bg-transparent select-wrapper"
     >
       <HoppButtonSecondary
         :icon="IconLayers"
@@ -22,6 +22,7 @@
         class="flex-1 !justify-start pr-8 rounded-none"
       />
     </span>
+
     <template #content="{ hide }">
       <div
         ref="tippyActions"
@@ -31,6 +32,7 @@
         @keyup.escape="hide()"
       >
         <HoppSmartItem
+          v-if="!isScopeSelector"
           :label="`${t('environment.no_environment')}`"
           :info-icon="
             selectedEnvironmentIndex.type === 'NO_ENV_SELECTED'
@@ -47,6 +49,21 @@
             }
           "
         />
+        <HoppSmartItem
+          v-else-if="isScopeSelector && modelValue"
+          :label="t('environment.global')"
+          :icon="IconGlobe"
+          :info-icon="modelValue.type === 'global' ? IconCheck : undefined"
+          :active-info-icon="modelValue.type === 'global'"
+          @click="
+            () => {
+              $emit('update:modelValue', {
+                type: 'global',
+              })
+              hide()
+            }
+          "
+        />
         <HoppSmartTabs
           v-model="selectedEnvTab"
           styles="sticky overflow-x-auto my-2 border border-divider rounded flex-shrink-0 z-10 top-0 bg-primary"
@@ -61,11 +78,14 @@
               :key="`gen-${index}`"
               :icon="IconLayers"
               :label="gen.name"
-              :info-icon="index === selectedEnv.index ? IconCheck : undefined"
-              :active-info-icon="index === selectedEnv.index"
+              :info-icon="isEnvActive(index) ? IconCheck : undefined"
+              :active-info-icon="isEnvActive(index)"
               @click="
                 () => {
-                  selectedEnvironmentIndex = { type: 'MY_ENV', index: index }
+                  handleEnvironmentChange(index, {
+                    type: 'my-environment',
+                    environment: gen,
+                  })
                   hide()
                 }
               "
@@ -96,18 +116,14 @@
                 :key="`gen-team-${index}`"
                 :icon="IconLayers"
                 :label="gen.environment.name"
-                :info-icon="
-                  gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
-                "
-                :active-info-icon="gen.id === selectedEnv.teamEnvID"
+                :info-icon="isEnvActive(gen.id) ? IconCheck : undefined"
+                :active-info-icon="isEnvActive(gen.id)"
                 @click="
                   () => {
-                    selectedEnvironmentIndex = {
-                      type: 'TEAM_ENV',
-                      teamEnvID: gen.id,
-                      teamID: gen.teamID,
-                      environment: gen.environment,
-                    }
+                    handleEnvironmentChange(index, {
+                      type: 'team-environment',
+                      environment: gen,
+                    })
                     hide()
                   }
                 "
@@ -136,9 +152,10 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from "vue"
+import { computed, onMounted, ref, watch } from "vue"
 import IconCheck from "~icons/lucide/check"
 import IconLayers from "~icons/lucide/layers"
+import IconGlobe from "~icons/lucide/globe"
 import { TippyComponent } from "vue-tippy"
 import { useI18n } from "~/composables/i18n"
 import { GQLError } from "~/helpers/backend/GQLClient"
@@ -156,6 +173,31 @@ import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { useLocalState } from "~/newstore/localstate"
 import { onLoggedIn } from "~/composables/auth"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
+import { Environment } from "@hoppscotch/data"
+
+type Scope =
+  | {
+      type: "global"
+    }
+  | {
+      type: "my-environment"
+      environment: Environment
+      index: number
+    }
+  | {
+      type: "team-environment"
+      environment: TeamEnvironment
+    }
+
+const props = defineProps<{
+  isScopeSelector?: boolean
+  modelValue?: Scope
+}>()
+
+const emit = defineEmits<{
+  (e: "update:modelValue", data: Scope): void
+}>()
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const mdAndLarger = breakpoints.greater("md")
@@ -170,6 +212,39 @@ const myEnvironments = useReadonlyStream(environments$, [])
 
 const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
 
+// 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)
+      }
+    }
+  }
+)
+
+// TeamEnv List Adapter
 const teamEnvListAdapter = new TeamEnvironmentAdapter(undefined)
 const teamListLoading = useReadonlyStream(teamEnvListAdapter.loading$, false)
 const teamAdapterError = useReadonlyStream(teamEnvListAdapter.error$, null)
@@ -204,63 +279,152 @@ 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 handleEnvironmentChange = (
+  index: number,
+  env?:
+    | {
+        type: "my-environment"
+        environment: Environment
+      }
+    | {
+        type: "team-environment"
+        environment: TeamEnvironment
+      }
+) => {
+  if (props.isScopeSelector && env) {
+    if (env.type === "my-environment") {
+      emit("update:modelValue", {
+        type: "my-environment",
+        environment: env.environment,
+        index,
+      })
+    } else if (env.type === "team-environment") {
+      emit("update:modelValue", {
+        type: "team-environment",
+        environment: env.environment,
+      })
+    }
+  } else {
+    if (env && env.type === "my-environment") {
+      selectedEnvironmentIndex.value = {
+        type: "MY_ENV",
+        index,
+      }
+    } else if (env && env.type === "team-environment") {
+      selectedEnvironmentIndex.value = {
+        type: "TEAM_ENV",
+        teamEnvID: env.environment.id,
+        teamID: env.environment.teamID,
+        environment: env.environment.environment,
       }
     }
   }
-)
+}
+
+const isEnvActive = (id: string | number) => {
+  if (props.isScopeSelector) {
+    if (props.modelValue?.type === "my-environment") {
+      return props.modelValue.index === id
+    } else if (props.modelValue?.type === "team-environment") {
+      return (
+        props.modelValue?.type === "team-environment" &&
+        props.modelValue.environment &&
+        props.modelValue.environment.id === id
+      )
+    }
+  } else {
+    if (selectedEnvironmentIndex.value.type === "MY_ENV") {
+      return selectedEnv.value.index === id
+    } else {
+      return (
+        selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
+        selectedEnv.value.teamEnvID === id
+      )
+    }
+  }
+}
 
 const selectedEnv = computed(() => {
-  if (selectedEnvironmentIndex.value.type === "MY_ENV") {
-    return {
-      type: "MY_ENV",
-      index: selectedEnvironmentIndex.value.index,
-      name: myEnvironments.value[selectedEnvironmentIndex.value.index].name,
-    }
-  } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
-    const teamEnv = teamEnvironmentList.value.find(
-      (env) =>
-        env.id ===
-        (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
-          selectedEnvironmentIndex.value.teamEnvID)
-    )
-    if (teamEnv) {
+  if (props.isScopeSelector) {
+    if (props.modelValue?.type === "my-environment") {
+      return {
+        type: "MY_ENV",
+        index: props.modelValue.index,
+        name: props.modelValue.environment?.name,
+      }
+    } else if (props.modelValue?.type === "team-environment") {
       return {
         type: "TEAM_ENV",
-        name: teamEnv.environment.name,
-        teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
+        name: props.modelValue.environment.environment.name,
+        teamEnvID: props.modelValue.environment.id,
+      }
+    } else {
+      return { type: "global", name: "Global" }
+    }
+  } else {
+    if (selectedEnvironmentIndex.value.type === "MY_ENV") {
+      return {
+        type: "MY_ENV",
+        index: selectedEnvironmentIndex.value.index,
+        name: myEnvironments.value[selectedEnvironmentIndex.value.index].name,
+      }
+    } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
+      const teamEnv = teamEnvironmentList.value.find(
+        (env) =>
+          env.id ===
+          (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
+            selectedEnvironmentIndex.value.teamEnvID)
+      )
+      if (teamEnv) {
+        return {
+          type: "TEAM_ENV",
+          name: teamEnv.environment.name,
+          teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
+        }
+      } else {
+        return { type: "NO_ENV_SELECTED" }
       }
     } else {
       return { type: "NO_ENV_SELECTED" }
     }
-  } else {
-    return { type: "NO_ENV_SELECTED" }
+  }
+})
+
+// Set the selected environment as initial scope value
+onMounted(() => {
+  if (props.isScopeSelector) {
+    if (
+      selectedEnvironmentIndex.value.type === "MY_ENV" &&
+      selectedEnvironmentIndex.value.index !== undefined
+    ) {
+      emit("update:modelValue", {
+        type: "my-environment",
+        environment: myEnvironments.value[selectedEnvironmentIndex.value.index],
+        index: selectedEnvironmentIndex.value.index,
+      })
+    } else if (
+      selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
+      selectedEnvironmentIndex.value.teamEnvID &&
+      teamEnvironmentList.value &&
+      teamEnvironmentList.value.length > 0
+    ) {
+      const teamEnv = teamEnvironmentList.value.find(
+        (env) =>
+          env.id ===
+          (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
+            selectedEnvironmentIndex.value.teamEnvID)
+      )
+      if (teamEnv) {
+        emit("update:modelValue", {
+          type: "team-environment",
+          environment: teamEnv,
+        })
+      }
+    } else {
+      emit("update:modelValue", {
+        type: "global",
+      })
+    }
   }
 })
 

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

@@ -26,6 +26,13 @@
       :editing-variable-name="editingVariableName"
       @hide-modal="displayModalEdit(false)"
     />
+    <EnvironmentsAdd
+      :show="showModalNew"
+      :name="editingVariableName"
+      :value="editingVariableValue"
+      :position="position"
+      @hide-modal="displayModalNew(false)"
+    />
   </div>
 </template>
 
@@ -161,10 +168,18 @@ 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"
@@ -233,4 +248,10 @@ watch(
   },
   { deep: true }
 )
+
+defineActionHandler("modals.environment.add", ({ envName, variableName }) => {
+  editingVariableName.value = envName
+  editingVariableValue.value = variableName
+  displayModalNew(true)
+})
 </script>

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

@@ -1,12 +1,12 @@
 <template>
-  <div class="flex" @click="OpenLogoutModal()">
+  <div class="flex" @click="openLogoutModal()">
     <HoppSmartItem
       ref="logoutItem"
       :icon="IconLogOut"
       :label="`${t('auth.logout')}`"
       :outline="outline"
       :shortcut="shortcut"
-      @click="OpenLogoutModal()"
+      @click="openLogoutModal()"
     />
     <HoppSmartConfirmModal
       :show="confirmLogout"
@@ -23,6 +23,7 @@ import IconLogOut from "~icons/lucide/log-out"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
 import { platform } from "~/platform"
+import { defineActionHandler } from "~/helpers/actions"
 
 defineProps({
   outline: {
@@ -55,8 +56,12 @@ const logout = async () => {
   }
 }
 
-const OpenLogoutModal = () => {
+const openLogoutModal = () => {
   emit("confirm-logout")
   confirmLogout.value = true
 }
+
+defineActionHandler("user.logout", () => {
+  openLogoutModal()
+})
 </script>

packages/hoppscotch-common/src/components/history/graphql/Card.vue

@@ -63,7 +63,7 @@ import { GQLHistoryEntry } from "~/newstore/history"
 import { shortDateTime } from "~/helpers/utils/date"
 
 import IconStar from "~icons/lucide/star"
-import IconStarOff from "~icons/lucide/star-off"
+import IconStarOff from "~icons/hopp/star-off"
 import IconTrash from "~icons/lucide/trash"
 import IconMinimize2 from "~icons/lucide/minimize-2"
 import IconMaximize2 from "~icons/lucide/maximize-2"

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

@@ -176,6 +176,7 @@ import {
 import HistoryRestCard from "./rest/Card.vue"
 import HistoryGraphqlCard from "./graphql/Card.vue"
 import { createNewTab } from "~/helpers/rest/tab"
+import { defineActionHandler } from "~/helpers/actions"
 
 type HistoryEntry = GQLHistoryEntry | RESTHistoryEntry
 
@@ -329,4 +330,8 @@ const toggleStar = (entry: HistoryEntry) => {
     toggleRESTHistoryEntryStar(entry as RESTHistoryEntry)
   else toggleGraphqlHistoryEntryStar(entry as GQLHistoryEntry)
 }
+
+defineActionHandler("history.clear", () => {
+  confirmRemove.value = true
+})
 </script>

packages/hoppscotch-common/src/components/history/rest/Card.vue

@@ -55,7 +55,7 @@ import { RESTHistoryEntry } from "~/newstore/history"
 import { shortDateTime } from "~/helpers/utils/date"
 
 import IconStar from "~icons/lucide/star"
-import IconStarOff from "~icons/lucide/star-off"
+import IconStarOff from "~icons/hopp/star-off"
 import IconTrash from "~icons/lucide/trash"
 
 const props = defineProps<{

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky top-0 z-20 flex-none flex-shrink-0 p-4 overflow-x-auto sm:flex sm:flex-shrink-0 sm:space-x-2 bg-primary"
+    class="sticky top-0 z-20 flex-none flex-shrink-0 p-4 sm:flex sm:flex-shrink-0 sm:space-x-2 bg-primary"
   >
     <div
       class="flex flex-1 border rounded min-w-52 border-divider whitespace-nowrap"
@@ -47,13 +47,14 @@
         </label>
       </div>
       <div
-        class="flex flex-1 overflow-auto transition border-l rounded-r border-divider bg-primaryLight whitespace-nowrap"
+        class="flex flex-1 transition border-l rounded-r border-divider bg-primaryLight whitespace-nowrap"
       >
         <SmartEnvInput
           v-model="tab.document.request.endpoint"
           :placeholder="`${t('request.url')}`"
-          @enter="newSendRequest()"
+          :auto-complete-source="userHistories"
           @paste="onPasteUrl($event)"
+          @enter="newSendRequest"
         />
       </div>
     </div>
@@ -228,7 +229,7 @@
 <script setup lang="ts">
 import { useI18n } from "@composables/i18n"
 import { useSetting } from "@composables/settings"
-import { useStreamSubscriber } from "@composables/stream"
+import { useReadonlyStream, useStreamSubscriber } from "@composables/stream"
 import { useToast } from "@composables/toast"
 import { refAutoReset, useVModel } from "@vueuse/core"
 import * as E from "fp-ts/Either"
@@ -259,6 +260,7 @@ import IconSave from "~icons/lucide/save"
 import IconShare2 from "~icons/lucide/share-2"
 import { HoppRESTTab } from "~/helpers/rest/tab"
 import { getDefaultRESTRequest } from "~/helpers/rest/default"
+import { RESTHistoryEntry, restHistory$ } from "~/newstore/history"
 import { platform } from "~/platform"
 import { getCurrentStrategyID } from "~/helpers/network"
 
@@ -313,6 +315,12 @@ const clearAll = ref<any | null>(null)
 const copyRequestAction = ref<any | null>(null)
 const saveRequestAction = ref<any | null>(null)
 
+const history = useReadonlyStream<RESTHistoryEntry[]>(restHistory$, [])
+
+const userHistories = computed(() => {
+  return history.value.map((history) => history.request.endpoint).slice(0, 10)
+})
+
 const newSendRequest = async () => {
   if (newEndpoint.value === "" || /^\s+$/.test(newEndpoint.value)) {
     toast.error(`${t("empty.endpoint")}`)

packages/hoppscotch-common/src/components/smart/EnvInput.vue

@@ -1,19 +1,44 @@
 <template>
-  <div
-    class="relative flex items-center flex-1 flex-shrink-0 py-4 overflow-auto whitespace-nowrap"
-  >
-    <div class="absolute inset-0 flex flex-1">
+  <div class="autocomplete-wrapper">
+    <div class="absolute inset-0 flex flex-1 overflow-x-auto">
       <div
         ref="editor"
         :placeholder="placeholder"
         class="flex flex-1"
         :class="styles"
-        @keydown.enter.prevent="emit('enter', $event)"
-        @keyup="emit('keyup', $event)"
         @click="emit('click', $event)"
-        @keydown="emit('keydown', $event)"
+        @keydown="handleKeystroke"
+        @focusin="showSuggestionPopover = true"
       ></div>
     </div>
+    <ul
+      v-if="showSuggestionPopover && autoCompleteSource"
+      ref="suggestionsMenu"
+      class="suggestions"
+    >
+      <li
+        v-for="(suggestion, index) in suggestions"
+        :key="`suggestion-${index}`"
+        :class="{ active: currentSuggestionIndex === index }"
+        @click="updateModelValue(suggestion)"
+      >
+        <span class="truncate py-0.5">
+          {{ suggestion }}
+        </span>
+        <div
+          v-if="currentSuggestionIndex === index"
+          class="hidden md:flex text-secondary items-center"
+        >
+          <kbd class="shortcut-key">TAB</kbd>
+          <span class="ml-2 truncate">to select</span>
+        </div>
+      </li>
+      <li v-if="suggestions.length === 0" class="pointer-events-none">
+        <span class="truncate py-0.5">
+          {{ t("empty.history_suggestions") }}
+        </span>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -35,6 +60,9 @@ import { HoppReactiveEnvPlugin } from "~/helpers/editor/extensions/HoppEnvironme
 import { useReadonlyStream } from "@composables/stream"
 import { AggregateEnvironment, aggregateEnvs$ } from "~/newstore/environments"
 import { platform } from "~/platform"
+import { useI18n } from "~/composables/i18n"
+import { onClickOutside, useDebounceFn } from "@vueuse/core"
+import { invokeAction } from "~/helpers/actions"
 
 const props = withDefaults(
   defineProps<{
@@ -46,6 +74,7 @@ const props = withDefaults(
     selectTextOnMount?: boolean
     environmentHighlights?: boolean
     readonly?: boolean
+    autoCompleteSource?: string[]
   }>(),
   {
     modelValue: "",
@@ -55,6 +84,7 @@ const props = withDefaults(
     focus: false,
     readonly: false,
     environmentHighlights: true,
+    autoCompleteSource: undefined,
   }
 )
 
@@ -68,12 +98,165 @@ const emit = defineEmits<{
   (e: "click", ev: any): void
 }>()
 
+const t = useI18n()
+
 const cachedValue = ref(props.modelValue)
 
 const view = ref<EditorView>()
 
 const editor = ref<any | null>(null)
 
+const currentSuggestionIndex = ref(-1)
+const showSuggestionPopover = ref(false)
+
+const suggestionsMenu = ref<any | null>(null)
+
+onClickOutside(suggestionsMenu, () => {
+  showSuggestionPopover.value = false
+})
+
+//filter autocompleteSource with unique values
+const uniqueAutoCompleteSource = computed(() => {
+  if (props.autoCompleteSource) {
+    return [...new Set(props.autoCompleteSource)]
+  } else {
+    return []
+  }
+})
+
+const suggestions = computed(() => {
+  if (
+    props.modelValue &&
+    props.modelValue.length > 0 &&
+    uniqueAutoCompleteSource.value &&
+    uniqueAutoCompleteSource.value.length > 0
+  ) {
+    return uniqueAutoCompleteSource.value.filter((suggestion) =>
+      suggestion.toLowerCase().includes(props.modelValue.toLowerCase())
+    )
+  } else {
+    return uniqueAutoCompleteSource.value ?? []
+  }
+})
+
+const updateModelValue = (value: string) => {
+  emit("update:modelValue", value)
+  emit("change", value)
+  showSuggestionPopover.value = false
+}
+
+const handleKeystroke = (ev: KeyboardEvent) => {
+  if (["ArrowDown", "ArrowUp", "Enter", "Tab", "Escape"].includes(ev.key)) {
+    ev.preventDefault()
+  }
+
+  if (ev.shiftKey) {
+    showSuggestionPopover.value = false
+    return
+  }
+
+  showSuggestionPopover.value = true
+
+  if (
+    ["Enter", "Tab"].includes(ev.key) &&
+    suggestions.value.length > 0 &&
+    currentSuggestionIndex.value > -1
+  ) {
+    updateModelValue(suggestions.value[currentSuggestionIndex.value])
+    currentSuggestionIndex.value = -1
+
+    //used to set codemirror cursor at the end of the line after selecting a suggestion
+    nextTick(() => {
+      view.value?.dispatch({
+        selection: EditorSelection.create([
+          EditorSelection.range(
+            props.modelValue.length,
+            props.modelValue.length
+          ),
+        ]),
+      })
+    })
+  }
+
+  if (ev.key === "ArrowDown") {
+    scrollActiveElIntoView()
+
+    currentSuggestionIndex.value =
+      currentSuggestionIndex.value < suggestions.value.length - 1
+        ? currentSuggestionIndex.value + 1
+        : suggestions.value.length - 1
+
+    emit("keydown", ev)
+  }
+
+  if (ev.key === "ArrowUp") {
+    scrollActiveElIntoView()
+
+    currentSuggestionIndex.value =
+      currentSuggestionIndex.value - 1 >= 0
+        ? currentSuggestionIndex.value - 1
+        : 0
+
+    emit("keyup", ev)
+  }
+
+  if (ev.key === "Enter") {
+    emit("enter", ev)
+    showSuggestionPopover.value = false
+  }
+
+  if (ev.key === "Escape") {
+    showSuggestionPopover.value = false
+  }
+
+  // used to scroll to the first suggestion when left arrow is pressed
+  if (ev.key === "ArrowLeft") {
+    if (suggestions.value.length > 0) {
+      currentSuggestionIndex.value = 0
+      nextTick(() => {
+        scrollActiveElIntoView()
+      })
+    }
+  }
+
+  // used to scroll to the last suggestion when right arrow is pressed
+  if (ev.key === "ArrowRight") {
+    if (suggestions.value.length > 0) {
+      currentSuggestionIndex.value = suggestions.value.length - 1
+      nextTick(() => {
+        scrollActiveElIntoView()
+      })
+    }
+  }
+}
+
+// reset currentSuggestionIndex showSuggestionPopover is false
+watch(
+  () => showSuggestionPopover.value,
+  (newVal) => {
+    if (!newVal) {
+      currentSuggestionIndex.value = -1
+    }
+  }
+)
+
+/**
+ * Used to scroll the active suggestion into view
+ */
+const scrollActiveElIntoView = () => {
+  const suggestionsMenuEl = suggestionsMenu.value
+  if (suggestionsMenuEl) {
+    const activeSuggestionEl = suggestionsMenuEl.querySelector(".active")
+    if (activeSuggestionEl) {
+      activeSuggestionEl.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "start",
+      })
+    }
+  }
+}
+
 watch(
   () => props.modelValue,
   (newVal) => {
@@ -122,8 +305,46 @@ const envVars = computed(() =>
 const envTooltipPlugin = new HoppReactiveEnvPlugin(envVars, view)
 
 const initView = (el: any) => {
+  function handleTextSelection() {
+    const selection = view.value?.state.selection.main
+    if (selection) {
+      const from = selection.from
+      const to = selection.to
+      const text = view.value?.state.doc.sliceString(from, to)
+      const { top, left } = view.value?.coordsAtPos(from)
+      if (text) {
+        invokeAction("contextmenu.open", {
+          position: {
+            top,
+            left,
+          },
+          text,
+        })
+        showSuggestionPopover.value = false
+      } else {
+        invokeAction("contextmenu.open", {
+          position: {
+            top,
+            left,
+          },
+          text: null,
+        })
+      }
+    }
+  }
+
+  // Debounce to prevent double click from selecting the word
+  const debounceFn = useDebounceFn(() => {
+    handleTextSelection()
+  }, 140)
+
+  el.addEventListener("mouseup", debounceFn)
+  el.addEventListener("keyup", debounceFn)
+
   const extensions: Extension = [
+    EditorView.lineWrapping,
     EditorView.contentAttributes.of({ "aria-label": props.placeholder }),
+    EditorView.contentAttributes.of({ "data-enable-grammarly": "false" }),
     EditorView.updateListener.of((update) => {
       if (props.readonly) {
         update.view.contentDOM.inputMode = "none"
@@ -236,3 +457,49 @@ watch(editor, () => {
   }
 })
 </script>
+
+<style lang="scss" scoped>
+.autocomplete-wrapper {
+  @apply relative;
+  @apply flex;
+  @apply flex-1;
+  @apply flex-shrink-0;
+  @apply whitespace-nowrap;
+
+  .suggestions {
+    @apply absolute;
+    @apply bg-popover;
+    @apply z-50;
+    @apply shadow-lg;
+    @apply max-h-46;
+    @apply border-b border-x border-divider;
+    @apply overflow-y-auto;
+    @apply -left-[1px];
+    @apply -right-[1px];
+
+    top: calc(100% + 1px);
+    border-radius: 0 0 8px 8px;
+
+    li {
+      @apply flex;
+      @apply items-center;
+      @apply justify-between;
+      @apply w-full;
+      @apply py-2 px-4;
+      @apply text-secondary;
+      @apply cursor-pointer;
+
+      &:last-child {
+        border-radius: 0 0 0 8px;
+      }
+
+      &:hover,
+      &.active {
+        @apply bg-primaryDark;
+        @apply text-secondaryDark;
+        @apply cursor-pointer;
+      }
+    }
+  }
+}
+</style>

packages/hoppscotch-common/src/components/smart/Tree.vue

@@ -10,6 +10,7 @@
         class="flex flex-col flex-1"
       >
         <SmartTreeBranch
+          :root-nodes-length="rootNodes.data.length"
           :node-item="rootNode"
           :adapter="adapter as SmartTreeAdapter<T>"
         >

packages/hoppscotch-common/src/components/smart/TreeBranch.vue

@@ -85,19 +85,25 @@ const props = defineProps<{
    *  The node item that will be used to render the tree branch content
    */
   nodeItem: TreeNode<T>
+  /**
+   *  Total number of rootNode
+   */
+  rootNodesLength?: number
 }>()
 
 const CHILD_SLOT_NAME = "default"
 const t = useI18n()
 
+const isOnlyRootChild = computed(() => props.rootNodesLength === 1)
+
 /**
  * Marks whether the children on this branch were ever rendered
  * See the usage inside '<template>' for more info
  */
-const childrenRendered = ref(false)
+const childrenRendered = ref(isOnlyRootChild.value)
 
-const showChildren = ref(false)
-const isNodeOpen = ref(false)
+const showChildren = ref(isOnlyRootChild.value)
+const isNodeOpen = ref(isOnlyRootChild.value)
 
 const highlightNode = ref(false)
 

packages/hoppscotch-common/src/composables/codemirror.ts

@@ -40,6 +40,8 @@ import {
 import { HoppEnvironmentPlugin } from "@helpers/editor/extensions/HoppEnvironment"
 import xmlFormat from "xml-formatter"
 import { platform } from "~/platform"
+import { invokeAction } from "~/helpers/actions"
+import { useDebounceFn } from "@vueuse/core"
 // TODO: Migrate from legacy mode
 
 type ExtendedEditorConfig = {
@@ -218,6 +220,40 @@ export function useCodemirror(
       ViewPlugin.fromClass(
         class {
           update(update: ViewUpdate) {
+            function handleTextSelection() {
+              const selection = view.value?.state.selection.main
+              if (selection) {
+                const from = selection.from
+                const to = selection.to
+                const text = view.value?.state.doc.sliceString(from, to)
+                const { top, left } = view.value?.coordsAtPos(from)
+                if (text) {
+                  invokeAction("contextmenu.open", {
+                    position: {
+                      top,
+                      left,
+                    },
+                    text,
+                  })
+                } else {
+                  invokeAction("contextmenu.open", {
+                    position: {
+                      top,
+                      left,
+                    },
+                    text: null,
+                  })
+                }
+              }
+            }
+
+            // Debounce to prevent double click from selecting the word
+            const debounceFn = useDebounceFn(() => {
+              handleTextSelection()
+            }, 140)
+
+            el.addEventListener("mouseup", debounceFn)
+            el.addEventListener("keyup", debounceFn)
             const cursorPos = update.state.selection.main.head
             const line = update.state.doc.lineAt(cursorPos)
 
@@ -276,6 +312,7 @@ export function useCodemirror(
           run: indentLess,
         },
       ]),
+      EditorView.contentAttributes.of({ "data-enable-grammarly": "false" }),
     ]
 
     if (environmentTooltip) extensions.push(environmentTooltip.extension)

packages/hoppscotch-common/src/helpers/actions.ts

@@ -2,10 +2,13 @@
  * For example, sending a request.
  */
 
-import { onBeforeUnmount, onMounted } from "vue"
+import { Ref, onBeforeUnmount, onMounted, watch } from "vue"
 import { BehaviorSubject } from "rxjs"
+import { HoppRESTDocument } from "./rest/document"
+import { HoppGQLRequest } from "@hoppscotch/data"
 
 export type HoppAction =
+  | "contextmenu.open" // Send/Cancel a Hoppscotch Request
   | "request.send-cancel" // Send/Cancel a Hoppscotch Request
   | "request.reset" // Clear request data
   | "request.copy-link" // Copy Request Link
@@ -22,6 +25,7 @@ export type HoppAction =
   | "modals.search.toggle" // Shows the search modal
   | "modals.support.toggle" // Shows the support modal
   | "modals.share.toggle" // Shows the share modal
+  | "modals.environment.add" // Show add environment modal via context menu
   | "modals.my.environment.edit" // Edit current personal environment
   | "modals.team.environment.edit" // Edit current team environment
   | "navigation.jump.rest" // Jump to REST page
@@ -38,6 +42,9 @@ export type HoppAction =
   | "response.file.download" // Download response as file
   | "response.copy" // Copy response to clipboard
   | "modals.login.toggle" // Login to Hoppscotch
+  | "history.clear" // Clear REST History
+  | "user.login" // Login to Hoppscotch
+  | "user.logout" // Log out of Hoppscotch
 
 /**
  * Defines the arguments, if present for a given type that is required to be passed on
@@ -50,7 +57,14 @@ export type HoppAction =
  * NOTE: We can't enforce type checks to make sure the key is Action, you
  * will know if you got something wrong if there is a type error in this file
  */
-type HoppActionArgs = {
+type HoppActionArgsMap = {
+  "contextmenu.open": {
+    position: {
+      top: number
+      left: number
+    }
+    text: string | null
+  }
   "modals.my.environment.edit": {
     envName: string
     variableName: string
@@ -59,12 +73,22 @@ type HoppActionArgs = {
     envName: string
     variableName: string
   }
+  "rest.request.open": {
+    doc: HoppRESTDocument
+  }
+  "gql.request.open": {
+    request: HoppGQLRequest
+  }
+  "modals.environment.add": {
+    envName: string
+    variableName: string
+  }
 }
 
 /**
  * HoppActions which require arguments for their invocation
  */
-type HoppActionWithArgs = keyof HoppActionArgs
+export type HoppActionWithArgs = keyof HoppActionArgsMap
 
 /**
  * HoppActions which do not require arguments for their invocation
@@ -74,27 +98,27 @@ export type HoppActionWithNoArgs = Exclude<HoppAction, HoppActionWithArgs>
 /**
  * Resolves the argument type for a given HoppAction
  */
-type ArgOfHoppAction<A extends HoppAction> = A extends HoppActionWithArgs
-  ? HoppActionArgs[A]
-  : undefined
+type ArgOfHoppAction<A extends HoppAction | HoppActionWithArgs> =
+  A extends HoppActionWithArgs ? HoppActionArgsMap[A] : undefined
 
 /**
  * Resolves the action function for a given HoppAction, used by action handler function defs
  */
-type ActionFunc<A extends HoppAction> = A extends HoppActionWithArgs
-  ? (arg: ArgOfHoppAction<A>) => void
-  : () => void
+type ActionFunc<A extends HoppAction | HoppActionWithArgs> =
+  A extends HoppActionWithArgs ? (arg: ArgOfHoppAction<A>) => void : () => void
 
 type BoundActionList = {
   // eslint-disable-next-line no-unused-vars
-  [A in HoppAction]?: Array<ActionFunc<A>>
+  [A in HoppAction | HoppActionWithArgs]?: Array<ActionFunc<A>>
 }
 
 const boundActions: BoundActionList = {}
 
-export const activeActions$ = new BehaviorSubject<HoppAction[]>([])
+export const activeActions$ = new BehaviorSubject<
+  (HoppAction | HoppActionWithArgs)[]
+>([])
 
-export function bindAction<A extends HoppAction>(
+export function bindAction<A extends HoppAction | HoppActionWithArgs>(
   action: A,
   handler: ActionFunc<A>
 ) {
@@ -110,7 +134,7 @@ export function bindAction<A extends HoppAction>(
 
 type InvokeActionFunc = {
   (action: HoppActionWithNoArgs, args?: undefined): void
-  <A extends HoppActionWithArgs>(action: A, args: ArgOfHoppAction<A>): void
+  <A extends HoppActionWithArgs>(action: A, args: HoppActionArgsMap[A]): void
 }
 
 /**
@@ -119,14 +143,16 @@ type InvokeActionFunc = {
  * @param action The action to fire
  * @param args The argument passed to the action handler. Optional if action has no args required
  */
-export const invokeAction: InvokeActionFunc = <A extends HoppAction>(
+export const invokeAction: InvokeActionFunc = <
+  A extends HoppAction | HoppActionWithArgs
+>(
   action: A,
   args: ArgOfHoppAction<A>
 ) => {
-  boundActions[action]?.forEach((handler) => handler(args!))
+  boundActions[action]?.forEach((handler) => handler(args! as any))
 }
 
-export function unbindAction<A extends HoppAction>(
+export function unbindAction<A extends HoppAction | HoppActionWithArgs>(
   action: A,
   handler: ActionFunc<A>
 ) {
@@ -142,15 +168,57 @@ export function unbindAction<A extends HoppAction>(
   activeActions$.next(Object.keys(boundActions) as HoppAction[])
 }
 
-export function defineActionHandler<A extends HoppAction>(
+/**
+ * A composable function that defines a component can handle a given
+ * HoppAction. The handler will be bound when the component is mounted
+ * and unbound when the component is unmounted.
+ * @param action The action to be bound
+ * @param handler The function to be called when the action is invoked
+ * @param isActive A ref that indicates whether the action is active
+ */
+export function defineActionHandler<A extends HoppAction | HoppActionWithArgs>(
   action: A,
-  handler: ActionFunc<A>
+  handler: ActionFunc<A>,
+  isActive: Ref<boolean> | undefined = undefined
 ) {
+  let mounted = false
+  let bound = false
+
   onMounted(() => {
-    bindAction(action, handler)
+    mounted = true
+
+    // Only bind if isActive is undefined or true
+    if (isActive === undefined || isActive.value === true) {
+      bound = true
+      bindAction(action, handler)
+    }
   })
 
   onBeforeUnmount(() => {
+    mounted = false
+    bound = false
+
     unbindAction(action, handler)
   })
+
+  if (isActive) {
+    watch(
+      isActive,
+      (active) => {
+        if (mounted) {
+          if (active) {
+            if (!bound) {
+              bound = true
+              bindAction(action, handler)
+            }
+          } else if (bound) {
+            bound = false
+
+            unbindAction(action, handler)
+          }
+        }
+      },
+      { immediate: true }
+    )
+  }
 }

packages/hoppscotch-common/src/helpers/keybindings.ts

@@ -14,7 +14,13 @@ let keybindingsEnabled = true
  * Alt is also regarded as macOS OPTION (⌥) key
  * Ctrl is also regarded as macOS COMMAND (⌘) key (NOTE: this differs from HTML Keyboard spec where COMMAND is Meta key!)
  */
-type ModifierKeys = "ctrl" | "alt" | "ctrl-shift" | "alt-shift"
+type ModifierKeys =
+  | "ctrl"
+  | "alt"
+  | "ctrl-shift"
+  | "alt-shift"
+  | "ctrl-alt"
+  | "ctrl-alt-shift"
 
 /* eslint-disable prettier/prettier */
 // prettier-ignore
@@ -48,8 +54,8 @@ export const bindings: {
   "alt-p": "request.method.post",
   "alt-u": "request.method.put",
   "alt-x": "request.method.delete",
-  "ctrl-k": "flyouts.keybinds.toggle",
-  "/": "modals.search.toggle",
+  "ctrl-k": "modals.search.toggle",
+  "ctrl-/": "flyouts.keybinds.toggle",
   "?": "modals.support.toggle",
   "ctrl-m": "modals.share.toggle",
   "alt-r": "navigation.jump.rest",
@@ -143,18 +149,19 @@ function getPressedKey(ev: KeyboardEvent): Key | null {
 }
 
 function getActiveModifier(ev: KeyboardEvent): ModifierKeys | null {
-  const isShiftKey = ev.shiftKey
+  const modifierKeys = {
+    ctrl: isAppleDevice() ? ev.metaKey : ev.ctrlKey,
+    alt: ev.altKey,
+    shift: ev.shiftKey,
+  }
 
-  // We only allow one modifier key to be pressed (for now)
-  // Control key (+ Command) gets priority and if Alt is also pressed, it is ignored
-  if (isAppleDevice() && ev.metaKey) return isShiftKey ? "ctrl-shift" : "ctrl"
-  else if (!isAppleDevice() && ev.ctrlKey)
-    return isShiftKey ? "ctrl-shift" : "ctrl"
+  // active modifier: ctrl | alt | ctrl-alt | ctrl-shift | ctrl-alt-shift | alt-shift
+  // modiferKeys object's keys are sorted to match the above order
+  const activeModifier = Object.keys(modifierKeys)
+    .filter((key) => modifierKeys[key as keyof typeof modifierKeys])
+    .join("-")
 
-  // Test for Alt key
-  if (ev.altKey) return isShiftKey ? "alt-shift" : "alt"
-
-  return null
+  return activeModifier === "" ? null : (activeModifier as ModifierKeys)
 }
 
 /**

packages/hoppscotch-common/src/helpers/powerSearchNavigation.ts

@@ -1,55 +0,0 @@
-import { ref } from "vue"
-
-const NAVIGATION_KEYS = ["ArrowDown", "ArrowUp", "Enter"]
-
-export function useArrowKeysNavigation(searchItems: any, options: any = {}) {
-  function handleArrowKeysNavigation(
-    event: any,
-    itemIndex: any,
-    preventPropagation: boolean
-  ) {
-    if (!NAVIGATION_KEYS.includes(event.key)) return
-
-    if (preventPropagation) event.stopImmediatePropagation()
-
-    const itemsLength = searchItems.value.length
-    const lastItemIndex = itemsLength - 1
-    const itemIndexValue = itemIndex.value
-    const action = searchItems.value[itemIndexValue]?.action
-
-    if (action && event.key === "Enter" && options.onEnter) {
-      options.onEnter(action)
-      return
-    }
-
-    if (itemsLength && event.key === "ArrowDown") {
-      itemIndex.value = itemIndexValue < lastItemIndex ? itemIndexValue + 1 : 0
-    } else if (itemIndexValue === 0) itemIndex.value = lastItemIndex
-    else if (itemsLength && event.key === "ArrowUp")
-      itemIndex.value = itemIndexValue - 1
-  }
-
-  const preventPropagation = options && options.stopPropagation
-
-  const selectedEntry = ref(0)
-
-  const onKeyUp = (event: any) => {
-    handleArrowKeysNavigation(event, selectedEntry, preventPropagation)
-  }
-
-  function bindArrowKeysListeners() {
-    window.addEventListener("keydown", onKeyUp, { capture: preventPropagation })
-  }
-
-  function unbindArrowKeysListeners() {
-    window.removeEventListener("keydown", onKeyUp, {
-      capture: preventPropagation,
-    })
-  }
-
-  return {
-    bindArrowKeysListeners,
-    unbindArrowKeysListeners,
-    selectedEntry,
-  }
-}

packages/hoppscotch-common/src/helpers/shortcuts.ts

@@ -1,315 +1,146 @@
-import IconLifeBuoy from "~icons/lucide/life-buoy"
-import IconZap from "~icons/lucide/zap"
-import IconArrowRight from "~icons/lucide/arrow-right"
-import IconGift from "~icons/lucide/gift"
-import IconMonitor from "~icons/lucide/monitor"
-import IconSun from "~icons/lucide/sun"
-import IconCloud from "~icons/lucide/cloud"
-import IconMoon from "~icons/lucide/moon"
 import { getPlatformAlternateKey, getPlatformSpecialKey } from "./platformutils"
 
-export default [
-  {
-    section: "shortcut.general.title",
-    shortcuts: [
-      {
-        keys: ["?"],
-        label: "shortcut.general.help_menu",
-      },
-      {
-        keys: ["/"],
-        label: "shortcut.general.command_menu",
-      },
-      {
-        keys: [getPlatformSpecialKey(), "K"],
-        label: "shortcut.general.show_all",
-      },
-      {
-        keys: ["ESC"],
-        label: "shortcut.general.close_current_menu",
-      },
-    ],
-  },
-  {
-    section: "shortcut.request.title",
-    shortcuts: [
-      {
-        keys: [getPlatformSpecialKey(), "↩"],
-        label: "shortcut.request.send_request",
-      },
-      {
-        keys: [getPlatformSpecialKey(), "S"],
-        label: "shortcut.request.save_to_collections",
-      },
-      {
-        keys: [getPlatformSpecialKey(), "U"],
-        label: "shortcut.request.copy_request_link",
-      },
-      {
-        keys: [getPlatformSpecialKey(), "I"],
-        label: "shortcut.request.reset_request",
-      },
-      {
-        keys: [getPlatformAlternateKey(), "↑"],
-        label: "shortcut.request.next_method",
-      },
-      {
-        keys: [getPlatformAlternateKey(), "↓"],
-        label: "shortcut.request.previous_method",
-      },
-      {
-        keys: [getPlatformAlternateKey(), "G"],
-        label: "shortcut.request.get_method",
-      },
-      {
-        keys: [getPlatformAlternateKey(), "H"],
-        label: "shortcut.request.head_method",
-      },
-      {
-        keys: [getPlatformAlternateKey(), "P"],
-        label: "shortcut.request.post_method",
-      },
-      {
-        keys: [getPlatformAlternateKey(), "U"],
-        label: "shortcut.request.put_method",
-      },
-      {
-        keys: [getPlatformAlternateKey(), "X"],
-        label: "shortcut.request.delete_method",
-      },
-    ],
-  },
-  {
-    section: "shortcut.response.title",
-    shortcuts: [
-      {
-        keys: [getPlatformSpecialKey(), "J"],
-        label: "shortcut.response.download",
-      },
-      {
-        keys: [getPlatformSpecialKey(), "."],
-        label: "shortcut.response.copy",
-      },
-    ],
-  },
-  {
-    section: "shortcut.navigation.title",
-    shortcuts: [
-      {
-        keys: [getPlatformSpecialKey(), "←"],
-        label: "shortcut.navigation.back",
-      },
-      {
-        keys: [getPlatformSpecialKey(), "→"],
-        label: "shortcut.navigation.forward",
-      },
-      {
-        keys: [getPlatformAlternateKey(), "R"],
-        label: "shortcut.navigation.rest",
-      },
-      {
-        keys: [getPlatformAlternateKey(), "Q"],
-        label: "shortcut.navigation.graphql",
-      },
-      {
-        keys: [getPlatformAlternateKey(), "W"],
-        label: "shortcut.navigation.realtime",
-      },
-      {
-        keys: [getPlatformAlternateKey(), "S"],
-        label: "shortcut.navigation.settings",
-      },
-      {
-        keys: [getPlatformAlternateKey(), "M"],
-        label: "shortcut.navigation.profile",
-      },
-    ],
-  },
-  {
-    section: "shortcut.miscellaneous.title",
-    shortcuts: [
-      {
-        keys: [getPlatformSpecialKey(), "M"],
-        label: "shortcut.miscellaneous.invite",
-      },
-    ],
-  },
-]
+export type ShortcutDef = {
+  label: string
+  keys: string[]
+  section: string
+}
 
-export const spotlight = [
-  {
-    section: "app.spotlight",
-    shortcuts: [
-      {
-        keys: ["?"],
-        label: "shortcut.general.help_menu",
-        action: "modals.support.toggle",
-        icon: IconLifeBuoy,
-      },
-      {
-        keys: [getPlatformSpecialKey(), "K"],
-        label: "shortcut.general.show_all",
-        action: "flyouts.keybinds.toggle",
-        icon: IconZap,
-      },
-    ],
-  },
-  {
-    section: "shortcut.navigation.title",
-    shortcuts: [
-      {
-        keys: [getPlatformAlternateKey(), "R"],
-        label: "shortcut.navigation.rest",
-        action: "navigation.jump.rest",
-        icon: IconArrowRight,
-      },
-      {
-        keys: [getPlatformAlternateKey(), "Q"],
-        label: "shortcut.navigation.graphql",
-        action: "navigation.jump.graphql",
-        icon: IconArrowRight,
-      },
-      {
-        keys: [getPlatformAlternateKey(), "W"],
-        label: "shortcut.navigation.realtime",
-        action: "navigation.jump.realtime",
-        icon: IconArrowRight,
-      },
-      {
-        keys: [getPlatformAlternateKey(), "S"],
-        label: "shortcut.navigation.settings",
-        action: "navigation.jump.settings",
-        icon: IconArrowRight,
-      },
-      {
-        keys: [getPlatformAlternateKey(), "M"],
-        label: "shortcut.navigation.profile",
-        action: "navigation.jump.profile",
-        icon: IconArrowRight,
-      },
-    ],
-  },
-  {
-    section: "shortcut.miscellaneous.title",
-    shortcuts: [
-      {
-        keys: [getPlatformSpecialKey(), "M"],
-        label: "shortcut.miscellaneous.invite",
-        action: "modals.share.toggle",
-        icon: IconGift,
-      },
-    ],
-  },
-]
+export function getShortcuts(t: (x: string) => string): ShortcutDef[] {
+  // General
+  return [
+    {
+      label: t("shortcut.general.help_menu"),
+      keys: ["?"],
+      section: t("shortcut.general.title"),
+    },
+    {
+      label: t("shortcut.general.command_menu"),
+      keys: [getPlatformSpecialKey(), "K"],
+      section: t("shortcut.general.title"),
+    },
+    {
+      label: t("shortcut.general.show_all"),
+      keys: [getPlatformSpecialKey(), "/"],
+      section: t("shortcut.general.title"),
+    },
+    {
+      label: t("shortcut.general.close_current_menu"),
+      keys: ["ESC"],
+      section: t("shortcut.general.title"),
+    },
 
-export const fuse = [
-  {
-    keys: ["?"],
-    label: "shortcut.general.help_menu",
-    action: "modals.support.toggle",
-    icon: IconLifeBuoy,
-    tags: [
-      "help",
-      "support",
-      "menu",
-      "discord",
-      "twitter",
-      "documentation",
-      "troubleshooting",
-      "chat",
-      "community",
-      "feedback",
-      "report",
-      "bug",
-      "issue",
-      "ticket",
-    ],
-  },
-  {
-    keys: [getPlatformSpecialKey(), "K"],
-    label: "shortcut.general.show_all",
-    action: "flyouts.keybinds.toggle",
-    icon: IconZap,
-    tags: ["keyboard", "shortcuts"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "R"],
-    label: "shortcut.navigation.rest",
-    action: "navigation.jump.rest",
-    icon: IconArrowRight,
-    tags: ["rest", "jump", "page", "navigation", "go"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "Q"],
-    label: "shortcut.navigation.graphql",
-    action: "navigation.jump.graphql",
-    icon: IconArrowRight,
-    tags: ["graphql", "jump", "page", "navigation", "go"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "W"],
-    label: "shortcut.navigation.realtime",
-    action: "navigation.jump.realtime",
-    icon: IconArrowRight,
-    tags: [
-      "realtime",
-      "jump",
-      "page",
-      "navigation",
-      "websocket",
-      "socket",
-      "mqtt",
-      "sse",
-      "go",
-    ],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "S"],
-    label: "shortcut.navigation.settings",
-    action: "navigation.jump.settings",
-    icon: IconArrowRight,
-    tags: ["settings", "jump", "page", "navigation", "account", "theme", "go"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "M"],
-    label: "shortcut.navigation.profile",
-    action: "navigation.jump.profile",
-    icon: IconArrowRight,
-    tags: ["profile", "jump", "page", "navigation", "account", "theme", "go"],
-  },
-  {
-    keys: [getPlatformSpecialKey(), "M"],
-    label: "shortcut.miscellaneous.invite",
-    action: "modals.share.toggle",
-    icon: IconGift,
-    tags: ["invite", "share", "app", "friends", "people", "social"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "0"],
-    label: "shortcut.theme.system",
-    action: "settings.theme.system",
-    icon: IconMonitor,
-    tags: ["theme", "system"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "1"],
-    label: "shortcut.theme.light",
-    action: "settings.theme.light",
-    icon: IconSun,
-    tags: ["theme", "light"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "2"],
-    label: "shortcut.theme.dark",
-    action: "settings.theme.dark",
-    icon: IconCloud,
-    tags: ["theme", "dark"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "3"],
-    label: "shortcut.theme.black",
-    action: "settings.theme.black",
-    icon: IconMoon,
-    tags: ["theme", "black"],
-  },
-]
+    // Request
+    {
+      label: t("shortcut.request.send_request"),
+      keys: [getPlatformSpecialKey(), "↩"],
+      section: t("shortcut.request.title"),
+    },
+    {
+      keys: [getPlatformSpecialKey(), "S"],
+      label: t("shortcut.request.save_to_collections"),
+      section: t("shortcut.request.title"),
+    },
+    {
+      keys: [getPlatformSpecialKey(), "U"],
+      label: t("shortcut.request.copy_request_link"),
+      section: t("shortcut.request.title"),
+    },
+    {
+      keys: [getPlatformSpecialKey(), "I"],
+      label: t("shortcut.request.reset_request"),
+      section: t("shortcut.request.title"),
+    },
+    {
+      keys: [getPlatformAlternateKey(), "↑"],
+      label: t("shortcut.request.next_method"),
+      section: t("shortcut.request.title"),
+    },
+    {
+      keys: [getPlatformAlternateKey(), "↓"],
+      label: t("shortcut.request.previous_method"),
+      section: t("shortcut.request.title"),
+    },
+    {
+      keys: [getPlatformAlternateKey(), "G"],
+      label: t("shortcut.request.get_method"),
+      section: t("shortcut.request.title"),
+    },
+    {
+      keys: [getPlatformAlternateKey(), "H"],
+      label: t("shortcut.request.head_method"),
+      section: t("shortcut.request.title"),
+    },
+    {
+      keys: [getPlatformAlternateKey(), "P"],
+      label: t("shortcut.request.post_method"),
+      section: t("shortcut.request.title"),
+    },
+    {
+      keys: [getPlatformAlternateKey(), "U"],
+      label: t("shortcut.request.put_method"),
+      section: t("shortcut.request.title"),
+    },
+    {
+      keys: [getPlatformAlternateKey(), "X"],
+      label: t("shortcut.request.delete_method"),
+      section: t("shortcut.request.title"),
+    },
+
+    // Response
+    {
+      keys: [getPlatformSpecialKey(), "J"],
+      label: t("shortcut.response.download"),
+      section: t("shortcut.response.title"),
+    },
+    {
+      keys: [getPlatformSpecialKey(), "."],
+      label: t("shortcut.response.copy"),
+      section: t("shortcut.response.title"),
+    },
+
+    // Navigation
+    {
+      keys: [getPlatformSpecialKey(), "←"],
+      label: t("shortcut.navigation.back"),
+      section: t("shortcut.navigation.title"),
+    },
+    {
+      keys: [getPlatformSpecialKey(), "→"],
+      label: t("shortcut.navigation.forward"),
+      section: t("shortcut.navigation.title"),
+    },
+    {
+      keys: [getPlatformAlternateKey(), "R"],
+      label: t("shortcut.navigation.rest"),
+      section: t("shortcut.navigation.title"),
+    },
+    {
+      keys: [getPlatformAlternateKey(), "Q"],
+      label: t("shortcut.navigation.graphql"),
+      section: t("shortcut.navigation.title"),
+    },
+    {
+      keys: [getPlatformAlternateKey(), "W"],
+      label: t("shortcut.navigation.realtime"),
+      section: t("shortcut.navigation.title"),
+    },
+    {
+      keys: [getPlatformAlternateKey(), "S"],
+      label: t("shortcut.navigation.settings"),
+      section: t("shortcut.navigation.title"),
+    },
+    {
+      keys: [getPlatformAlternateKey(), "M"],
+      label: t("shortcut.navigation.profile"),
+      section: t("shortcut.navigation.title"),
+    },
+
+    // Miscellaneous
+    {
+      keys: [getPlatformSpecialKey(), "M"],
+      label: t("shortcut.miscellaneous.invite"),
+      section: t("shortcut.miscellaneous.title"),
+    },
+  ]
+}

packages/hoppscotch-common/src/layouts/default.vue

@@ -50,7 +50,7 @@
       </Pane>
     </Splitpanes>
     <AppActionHandler />
-    <AppPowerSearch :show="showSearch" @hide-modal="showSearch = false" />
+    <AppSpotlight :show="showSearch" @hide-modal="showSearch = false" />
     <AppSupport
       v-if="mdAndLarger"
       :show="showSupport"

packages/hoppscotch-common/src/modules/dioc.ts

@@ -1,13 +1,38 @@
 import { HoppModule } from "."
-import { Container } from "dioc"
+import { Container, Service } from "dioc"
 import { diocPlugin } from "dioc/vue"
+import { DebugService } from "~/services/debug.service"
+
+const serviceContainer = new Container()
+
+if (import.meta.env.DEV) {
+  serviceContainer.bind(DebugService)
+}
+
+/**
+ * Gets a service from the app service container. You can use this function
+ * to get a service if you have no access to the container or if you are not
+ * in a component (if you are, you can use `useService`) or if you are not in a
+ * service.
+ * @param service The class of the service to get
+ * @returns The service instance
+ *
+ * @deprecated This is a temporary escape hatch for legacy code to access
+ * services. Please use `useService` if within components or try to convert your
+ * legacy subsystem into a service if possible.
+ */
+export function getService<T extends typeof Service<any> & { ID: string }>(
+  service: T
+): InstanceType<T> {
+  return serviceContainer.bind(service)
+}
 
 export default <HoppModule>{
   onVueAppInit(app) {
     // TODO: look into this
     // @ts-expect-error Something weird with Vue versions
     app.use(diocPlugin, {
-      container: new Container(),
+      container: serviceContainer,
     })
   },
 }

packages/hoppscotch-common/src/modules/i18n.ts

@@ -115,6 +115,14 @@ export const changeAppLanguage = async (locale: string) => {
   setLocalConfig("locale", locale)
 }
 
+/**
+ * Returns the i18n instance
+ */
+export function getI18n() {
+  // @ts-expect-error Something weird with the i18n errors
+  return i18nInstance!.global.t
+}
+
 export default <HoppModule>{
   onVueAppInit(app) {
     const i18n = createI18n(<I18nOptions>{

packages/hoppscotch-common/src/pages/graphql.vue

@@ -17,7 +17,10 @@
 import { usePageHead } from "@composables/head"
 import { useI18n } from "@composables/i18n"
 import { GQLConnection } from "@helpers/GQLConnection"
+import { cloneDeep } from "lodash-es"
 import { computed, onBeforeUnmount } from "vue"
+import { defineActionHandler } from "~/helpers/actions"
+import { getGQLSession, setGQLSession } from "~/newstore/GQLSession"
 
 const t = useI18n()
 
@@ -32,4 +35,14 @@ onBeforeUnmount(() => {
     gqlConn.disconnect()
   }
 })
+
+defineActionHandler("gql.request.open", ({ request }) => {
+  const session = getGQLSession()
+
+  setGQLSession({
+    request: cloneDeep(request),
+    schema: session.schema,
+    response: session.response,
+  })
+})
 </script>

packages/hoppscotch-common/src/pages/index.vue

@@ -84,6 +84,13 @@
       :show="savingRequest"
       @hide-modal="onSaveModalClose"
     />
+    <AppContextMenu
+      v-if="contextMenu.show"
+      :show="contextMenu.show"
+      :position="contextMenu.position"
+      :text="contextMenu.text"
+      @hide-modal="contextMenu.show = false"
+    />
   </div>
 </template>
 
@@ -108,7 +115,7 @@ import {
   updateTabOrdering,
 } from "~/helpers/rest/tab"
 import { getDefaultRESTRequest } from "~/helpers/rest/default"
-import { invokeAction } from "~/helpers/actions"
+import { defineActionHandler, invokeAction } from "~/helpers/actions"
 import { onLoggedIn } from "~/composables/auth"
 import { platform } from "~/platform"
 import {
@@ -138,6 +145,24 @@ const reqName = ref<string>("")
 const t = useI18n()
 const toast = useToast()
 
+type PopupDetails = {
+  show: boolean
+  position: {
+    top: number
+    left: number
+  }
+  text: string | null
+}
+
+const contextMenu = ref<PopupDetails>({
+  show: false,
+  position: {
+    top: 0,
+    left: 0,
+  },
+  text: null,
+})
+
 const tabs = getActiveTabs()
 
 const confirmSync = useReadonlyStream(currentSyncingStatus$, {
@@ -365,7 +390,27 @@ function oAuthURL() {
   })
 }
 
+defineActionHandler("contextmenu.open", ({ position, text }) => {
+  if (text) {
+    contextMenu.value = {
+      show: true,
+      position,
+      text,
+    }
+  } else {
+    contextMenu.value = {
+      show: false,
+      position,
+      text,
+    }
+  }
+})
+
 setupTabStateSync()
 bindRequestToURLParams()
 oAuthURL()
+
+defineActionHandler("rest.request.open", ({ doc }) => {
+  createNewTab(doc)
+})
 </script>

packages/hoppscotch-common/src/services/context-menu/__tests__/index.spec.ts

@@ -0,0 +1,114 @@
+import { describe, it, expect, vi } from "vitest"
+import { ContextMenu, ContextMenuResult, ContextMenuService } from "../"
+import { TestContainer } from "dioc/testing"
+
+const contextMenuResult: ContextMenuResult[] = [
+  {
+    id: "result1",
+    text: { type: "text", text: "Sample Text" },
+    icon: {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    action: () => {},
+  },
+]
+
+const testMenu: ContextMenu = {
+  menuID: "menu1",
+  getMenuFor: () => {
+    return {
+      results: contextMenuResult,
+    }
+  },
+}
+
+describe("ContextMenuService", () => {
+  describe("registerMenu", () => {
+    it("should register a menu", () => {
+      const container = new TestContainer()
+      const service = container.bind(ContextMenuService)
+
+      service.registerMenu(testMenu)
+
+      const result = service.getMenuFor("text")
+
+      expect(result).toContainEqual(expect.objectContaining({ id: "result1" }))
+    })
+
+    it("should not register a menu twice", () => {
+      const container = new TestContainer()
+      const service = container.bind(ContextMenuService)
+
+      service.registerMenu(testMenu)
+      service.registerMenu(testMenu)
+
+      const result = service.getMenuFor("text")
+
+      expect(result).toHaveLength(1)
+    })
+
+    it("should register multiple menus", () => {
+      const container = new TestContainer()
+      const service = container.bind(ContextMenuService)
+
+      const testMenu2: ContextMenu = {
+        menuID: "menu2",
+        getMenuFor: () => {
+          return {
+            results: contextMenuResult,
+          }
+        },
+      }
+
+      service.registerMenu(testMenu)
+      service.registerMenu(testMenu2)
+
+      const result = service.getMenuFor("text")
+
+      expect(result).toHaveLength(2)
+    })
+  })
+
+  describe("getMenuFor", () => {
+    it("should get the menu", () => {
+      const sampleMenus = {
+        results: contextMenuResult,
+      }
+
+      const container = new TestContainer()
+      const service = container.bind(ContextMenuService)
+
+      service.registerMenu(testMenu)
+
+      const results = service.getMenuFor("sometext")
+
+      expect(results).toEqual(sampleMenus.results)
+    })
+
+    it("calls registered menus with correct value", () => {
+      const container = new TestContainer()
+      const service = container.bind(ContextMenuService)
+
+      const testMenu2: ContextMenu = {
+        menuID: "some-id",
+        getMenuFor: vi.fn(() => ({
+          results: contextMenuResult,
+        })),
+      }
+
+      service.registerMenu(testMenu2)
+
+      service.getMenuFor("sometext")
+
+      expect(testMenu2.getMenuFor).toHaveBeenCalledWith("sometext")
+    })
+
+    it("should return empty array if no menus are registered", () => {
+      const container = new TestContainer()
+      const service = container.bind(ContextMenuService)
+
+      const results = service.getMenuFor("sometext")
+
+      expect(results).toEqual([])
+    })
+  })
+})

packages/hoppscotch-common/src/services/context-menu/index.ts

@@ -0,0 +1,109 @@
+import { Service } from "dioc"
+import { Component } from "vue"
+
+/**
+ * Defines how to render the text in a Context Menu Search Result
+ */
+export type ContextMenuTextType<T extends object | Component = never> =
+  | {
+      type: "text"
+      text: string
+    }
+  | {
+      type: "custom"
+      /**
+       * The component to render in place of the text
+       */
+      component: T
+
+      /**
+       * The props to pass to the component
+       */
+      componentProps: T extends Component<infer Props> ? Props : never
+    }
+
+/**
+ * Defines info about a context menu result so the UI can render it
+ */
+export interface ContextMenuResult {
+  /**
+   * The unique ID of the result
+   */
+  id: string
+  /**
+   * The text to render in the result
+   */
+  text: ContextMenuTextType<any>
+  /**
+   * The icon to render as the signifier of the result
+   */
+  icon: object | Component
+  /**
+   * The action to perform when the result is selected
+   */
+  action: () => void
+  /**
+   * Additional metadata about the result
+   */
+  meta?: {
+    /**
+     * The keyboard shortcut to trigger the result
+     */
+    keyboardShortcut?: string[]
+  }
+}
+
+/**
+ * Defines the state of a context menu
+ */
+export type ContextMenuState = {
+  results: ContextMenuResult[]
+}
+
+/**
+ * Defines a context menu
+ */
+export interface ContextMenu {
+  /**
+   * The unique ID of the context menu
+   * This is used to identify the context menu
+   */
+  menuID: string
+  /**
+   * Gets the context menu for the given text
+   * @param text The text to get the context menu for
+   * @returns The context menu state
+   */
+  getMenuFor: (text: string) => ContextMenuState
+}
+
+/**
+ * Defines the context menu service
+ * This service is used to register context menus and get context menus for text
+ * This service is used by the context menu UI
+ */
+export class ContextMenuService extends Service {
+  public static readonly ID = "CONTEXT_MENU_SERVICE"
+
+  private menus: Map<string, ContextMenu> = new Map()
+
+  /**
+   * Registers a menu with the context menu service
+   * @param menu The menu to register
+   */
+  public registerMenu(menu: ContextMenu) {
+    this.menus.set(menu.menuID, menu)
+  }
+
+  /**
+   * Gets the context menu for the given text
+   * @param text The text to get the context menu for
+   */
+  public getMenuFor(text: string): ContextMenuResult[] {
+    const menus = Array.from(this.menus.values()).map((x) => x.getMenuFor(text))
+
+    const result = menus.flatMap((x) => x.results)
+
+    return result
+  }
+}

packages/hoppscotch-common/src/services/context-menu/menu/__tests__/environment.menu.spec.ts

@@ -0,0 +1,70 @@
+import { TestContainer } from "dioc/testing"
+import { describe, expect, it, vi } from "vitest"
+import { EnvironmentMenuService } from "../environment.menu"
+import { ContextMenuService } from "../.."
+
+vi.mock("~/modules/i18n", () => ({
+  __esModule: true,
+  getI18n: () => (x: string) => x,
+}))
+
+const actionsMock = vi.hoisted(() => ({
+  invokeAction: vi.fn(),
+}))
+
+vi.mock("~/helpers/actions", async () => {
+  return {
+    __esModule: true,
+    invokeAction: actionsMock.invokeAction,
+  }
+})
+
+describe("EnvironmentMenuService", () => {
+  it("registers with the contextmenu service upon initialization", () => {
+    const container = new TestContainer()
+
+    const registerContextMenuFn = vi.fn()
+
+    container.bindMock(ContextMenuService, {
+      registerMenu: registerContextMenuFn,
+    })
+
+    const environment = container.bind(EnvironmentMenuService)
+
+    expect(registerContextMenuFn).toHaveBeenCalledOnce()
+    expect(registerContextMenuFn).toHaveBeenCalledWith(environment)
+  })
+
+  describe("getMenuFor", () => {
+    it("should return a menu for adding environment", () => {
+      const container = new TestContainer()
+      const environment = container.bind(EnvironmentMenuService)
+
+      const test = "some-text"
+      const result = environment.getMenuFor(test)
+
+      expect(result.results).toContainEqual(
+        expect.objectContaining({ id: "environment" })
+      )
+    })
+
+    it("should invoke the add environment modal", () => {
+      const container = new TestContainer()
+      const environment = container.bind(EnvironmentMenuService)
+
+      const test = "some-text"
+      const result = environment.getMenuFor(test)
+
+      const action = result.results[0].action
+      action()
+      expect(actionsMock.invokeAction).toHaveBeenCalledOnce()
+      expect(actionsMock.invokeAction).toHaveBeenCalledWith(
+        "modals.environment.add",
+        {
+          envName: "test",
+          variableName: test,
+        }
+      )
+    })
+  })
+})

packages/hoppscotch-common/src/services/context-menu/menu/__tests__/parameter.menu.spec.ts

@@ -0,0 +1,94 @@
+import { TestContainer } from "dioc/testing"
+import { describe, expect, it, vi } from "vitest"
+import { ContextMenuService } from "../.."
+import { ParameterMenuService } from "../parameter.menu"
+
+//regex containing both url and parameter
+const urlAndParameterRegex = new RegExp("[^&?]*?=[^&?]*")
+
+vi.mock("~/modules/i18n", () => ({
+  __esModule: true,
+  getI18n: () => (x: string) => x,
+}))
+
+const tabMock = vi.hoisted(() => ({
+  currentActiveTab: vi.fn(),
+}))
+
+vi.mock("~/helpers/rest/tab", () => ({
+  __esModule: true,
+  currentActiveTab: tabMock.currentActiveTab,
+}))
+
+describe("ParameterMenuService", () => {
+  it("registers with the contextmenu service upon initialization", () => {
+    const container = new TestContainer()
+
+    const registerContextMenuFn = vi.fn()
+
+    container.bindMock(ContextMenuService, {
+      registerMenu: registerContextMenuFn,
+    })
+
+    const parameter = container.bind(ParameterMenuService)
+
+    expect(registerContextMenuFn).toHaveBeenCalledOnce()
+    expect(registerContextMenuFn).toHaveBeenCalledWith(parameter)
+
+    describe("getMenuFor", () => {
+      it("validating if the text passes the regex and return the menu", () => {
+        const container = new TestContainer()
+        const parameter = container.bind(ParameterMenuService)
+
+        const test = "https://hoppscotch.io?id=some-text"
+        const result = parameter.getMenuFor(test)
+
+        if (test.match(urlAndParameterRegex)) {
+          expect(result.results).toContainEqual(
+            expect.objectContaining({ id: "parameter" })
+          )
+        } else {
+          expect(result.results).not.toContainEqual(
+            expect.objectContaining({ id: "parameter" })
+          )
+        }
+      })
+
+      it("should call the addParameter function when action is called", () => {
+        const addParameterFn = vi.fn()
+
+        const container = new TestContainer()
+        const environment = container.bind(ParameterMenuService)
+
+        const test = "https://hoppscotch.io"
+
+        const result = environment.getMenuFor(test)
+
+        const action = result.results[0].action
+
+        action()
+
+        expect(addParameterFn).toHaveBeenCalledOnce()
+        expect(addParameterFn).toHaveBeenCalledWith(action)
+      })
+
+      it("should call the extractParams function when addParameter function is called", () => {
+        const extractParamsFn = vi.fn()
+
+        const container = new TestContainer()
+        const environment = container.bind(ParameterMenuService)
+
+        const test = "https://hoppscotch.io"
+
+        const result = environment.getMenuFor(test)
+
+        const action = result.results[0].action
+
+        action()
+
+        expect(extractParamsFn).toHaveBeenCalledOnce()
+        expect(extractParamsFn).toHaveBeenCalledWith(action)
+      })
+    })
+  })
+})

packages/hoppscotch-common/src/services/context-menu/menu/__tests__/url.menu.spec.ts

@@ -0,0 +1,86 @@
+import { TestContainer } from "dioc/testing"
+import { describe, expect, it, vi } from "vitest"
+import { ContextMenuService } from "../.."
+import { URLMenuService } from "../url.menu"
+import { getDefaultRESTRequest } from "~/helpers/rest/default"
+
+vi.mock("~/modules/i18n", () => ({
+  __esModule: true,
+  getI18n: () => (x: string) => x,
+}))
+
+const tabMock = vi.hoisted(() => ({
+  createNewTab: vi.fn(),
+}))
+
+vi.mock("~/helpers/rest/tab", () => ({
+  __esModule: true,
+  createNewTab: tabMock.createNewTab,
+}))
+
+describe("URLMenuService", () => {
+  it("registers with the contextmenu service upon initialization", () => {
+    const container = new TestContainer()
+
+    const registerContextMenuFn = vi.fn()
+
+    container.bindMock(ContextMenuService, {
+      registerMenu: registerContextMenuFn,
+    })
+
+    const environment = container.bind(URLMenuService)
+
+    expect(registerContextMenuFn).toHaveBeenCalledOnce()
+    expect(registerContextMenuFn).toHaveBeenCalledWith(environment)
+  })
+
+  describe("getMenuFor", () => {
+    it("validating if the text passes the regex and return the menu", () => {
+      function isValidURL(url: string) {
+        try {
+          new URL(url)
+          return true
+        } catch (error) {
+          // Fallback to regular expression check
+          const pattern = /^(https?:\/\/)?([\w.-]+)(\.[\w.-]+)+([/?].*)?$/
+          return pattern.test(url)
+        }
+      }
+
+      const container = new TestContainer()
+      const url = container.bind(URLMenuService)
+
+      const test = ""
+      const result = url.getMenuFor(test)
+
+      if (isValidURL(test)) {
+        expect(result.results).toContainEqual(
+          expect.objectContaining({ id: "link-tab" })
+        )
+      } else {
+        expect(result).toEqual({ results: [] })
+      }
+    })
+
+    it("should call the openNewTab function when action is called and a new hoppscotch tab is opened", () => {
+      const container = new TestContainer()
+      const url = container.bind(URLMenuService)
+
+      const test = "https://hoppscotch.io"
+      const result = url.getMenuFor(test)
+
+      result.results[0].action()
+
+      const request = {
+        ...getDefaultRESTRequest(),
+        endpoint: test,
+      }
+
+      expect(tabMock.createNewTab).toHaveBeenCalledOnce()
+      expect(tabMock.createNewTab).toHaveBeenCalledWith({
+        request: request,
+        isDirty: false,
+      })
+    })
+  })
+})

packages/hoppscotch-common/src/services/context-menu/menu/environment.menu.ts

@@ -0,0 +1,56 @@
+import { Service } from "dioc"
+import {
+  ContextMenu,
+  ContextMenuResult,
+  ContextMenuService,
+  ContextMenuState,
+} from "../"
+import { markRaw, ref } from "vue"
+import { invokeAction } from "~/helpers/actions"
+import IconPlusCircle from "~icons/lucide/plus-circle"
+import { getI18n } from "~/modules/i18n"
+
+/**
+ * This menu returns a single result that allows the user
+ * to add the selected text as an environment variable
+ * This menus is shown on all text selections
+ */
+export class EnvironmentMenuService extends Service implements ContextMenu {
+  public static readonly ID = "ENVIRONMENT_CONTEXT_MENU_SERVICE"
+
+  private t = getI18n()
+
+  public readonly menuID = "environment"
+
+  private readonly contextMenu = this.bind(ContextMenuService)
+
+  constructor() {
+    super()
+
+    this.contextMenu.registerMenu(this)
+  }
+
+  getMenuFor(text: Readonly<string>): ContextMenuState {
+    const results = ref<ContextMenuResult[]>([])
+    results.value = [
+      {
+        id: "environment",
+        text: {
+          type: "text",
+          text: this.t("context_menu.set_environment_variable"),
+        },
+        icon: markRaw(IconPlusCircle),
+        action: () => {
+          invokeAction("modals.environment.add", {
+            envName: "test",
+            variableName: text,
+          })
+        },
+      },
+    ]
+    const resultObj = <ContextMenuState>{
+      results: results.value,
+    }
+    return resultObj
+  }
+}

packages/hoppscotch-common/src/services/context-menu/menu/parameter.menu.ts

@@ -0,0 +1,133 @@
+import { Service } from "dioc"
+import {
+  ContextMenu,
+  ContextMenuResult,
+  ContextMenuService,
+  ContextMenuState,
+} from "../"
+import { markRaw, ref } from "vue"
+import IconArrowDownRight from "~icons/lucide/arrow-down-right"
+import { currentActiveTab } from "~/helpers/rest/tab"
+import { getI18n } from "~/modules/i18n"
+
+//regex containing both url and parameter
+const urlAndParameterRegex = new RegExp("[^&?]*?=[^&?]*")
+
+interface Param {
+  [key: string]: string
+}
+
+/**
+ * The extracted parameters from the input
+ * with the new URL if it was provided
+ */
+interface ExtractedParams {
+  params: Param
+  newURL?: string
+}
+
+/**
+ * This menu returns a single result that allows the user
+ * to add the selected text as a parameter
+ * if the selected text is a valid URL
+ */
+export class ParameterMenuService extends Service implements ContextMenu {
+  public static readonly ID = "PARAMETER_CONTEXT_MENU_SERVICE"
+
+  private t = getI18n()
+
+  public readonly menuID = "parameter"
+
+  private readonly contextMenu = this.bind(ContextMenuService)
+
+  constructor() {
+    super()
+
+    this.contextMenu.registerMenu(this)
+  }
+
+  /**
+   *
+   * @param input The input to extract the parameters from
+   * @returns The extracted parameters and the new URL if it was provided
+   */
+  private extractParams(input: string): ExtractedParams {
+    let text = input
+    let newURL: string | undefined
+
+    // if the input is a URL, extract the parameters
+    if (text.startsWith("http")) {
+      const url = new URL(text)
+      newURL = url.origin + url.pathname
+      text = url.search.slice(1)
+    }
+
+    const regex = /(\w+)=(\w+)/g
+    const matches = text.matchAll(regex)
+    const params: Param = {}
+
+    // extract the parameters from the input
+    for (const match of matches) {
+      const [, key, value] = match
+      params[key] = value
+    }
+
+    return { params, newURL }
+  }
+
+  /**
+   * Adds the parameters from the input to the current request
+   * parameters and updates the endpoint if a new URL was provided
+   * @param text The input to extract the parameters from
+   */
+  private addParameter(text: string) {
+    const { params, newURL } = this.extractParams(text)
+
+    const queryParams = []
+    for (const [key, value] of Object.entries(params)) {
+      queryParams.push({ key, value, active: true })
+    }
+
+    // add the parameters to the current request parameters
+    currentActiveTab.value.document.request.params = [
+      ...currentActiveTab.value.document.request.params,
+      ...queryParams,
+    ]
+
+    if (newURL) {
+      currentActiveTab.value.document.request.endpoint = newURL
+    } else {
+      // remove the parameter from the URL
+      const textRegex = new RegExp(`\\b${text.replace(/\?/g, "")}\\b`, "gi")
+      const sanitizedWord = currentActiveTab.value.document.request.endpoint
+      const newURL = sanitizedWord.replace(textRegex, "")
+      currentActiveTab.value.document.request.endpoint = newURL
+    }
+  }
+
+  getMenuFor(text: Readonly<string>): ContextMenuState {
+    const results = ref<ContextMenuResult[]>([])
+
+    if (urlAndParameterRegex.test(text)) {
+      results.value = [
+        {
+          id: "environment",
+          text: {
+            type: "text",
+            text: this.t("context_menu.add_parameter"),
+          },
+          icon: markRaw(IconArrowDownRight),
+          action: () => {
+            this.addParameter(text)
+          },
+        },
+      ]
+    }
+
+    const resultObj = <ContextMenuState>{
+      results: results.value,
+    }
+
+    return resultObj
+  }
+}

packages/hoppscotch-common/src/services/context-menu/menu/url.menu.ts

@@ -0,0 +1,89 @@
+import { Service } from "dioc"
+import {
+  ContextMenu,
+  ContextMenuResult,
+  ContextMenuService,
+  ContextMenuState,
+} from ".."
+import { markRaw, ref } from "vue"
+import IconCopyPlus from "~icons/lucide/copy-plus"
+import { createNewTab } from "~/helpers/rest/tab"
+import { getDefaultRESTRequest } from "~/helpers/rest/default"
+import { getI18n } from "~/modules/i18n"
+
+/**
+ * Used to check if a string is a valid URL
+ * @param url The string to check
+ * @returns Whether the string is a valid URL
+ */
+function isValidURL(url: string) {
+  try {
+    // Try to create a URL object
+    // this will fail for endpoints like "localhost:3000", ie without a protocol
+    new URL(url)
+    return true
+  } catch (error) {
+    // Fallback to regular expression check
+    const pattern = /^(https?:\/\/)?([\w.-]+)(\.[\w.-]+)+([/?].*)?$/
+    return pattern.test(url)
+  }
+}
+
+export class URLMenuService extends Service implements ContextMenu {
+  public static readonly ID = "URL_CONTEXT_MENU_SERVICE"
+
+  private t = getI18n()
+
+  public readonly menuID = "url"
+
+  private readonly contextMenu = this.bind(ContextMenuService)
+
+  constructor() {
+    super()
+
+    this.contextMenu.registerMenu(this)
+  }
+
+  /**
+   * Opens a new tab with the provided URL
+   * @param url The URL to open
+   */
+  private openNewTab(url: string) {
+    //create a new request object
+    const request = {
+      ...getDefaultRESTRequest(),
+      endpoint: url,
+    }
+
+    createNewTab({
+      request: request,
+      isDirty: false,
+    })
+  }
+
+  getMenuFor(text: Readonly<string>): ContextMenuState {
+    const results = ref<ContextMenuResult[]>([])
+
+    if (isValidURL(text)) {
+      results.value = [
+        {
+          id: "link-tab",
+          text: {
+            type: "text",
+            text: this.t("context_menu.open_link_in_new_tab"),
+          },
+          icon: markRaw(IconCopyPlus),
+          action: () => {
+            this.openNewTab(text)
+          },
+        },
+      ]
+    }
+
+    const resultObj = <ContextMenuState>{
+      results: results.value,
+    }
+
+    return resultObj
+  }
+}

packages/hoppscotch-common/src/services/debug.service.ts

@@ -0,0 +1,64 @@
+import { Service } from "dioc"
+
+/**
+ * This service provice debug utilities for the application and is
+ * supposed to be used only in development.
+ *
+ * This service logs events from the container and also events
+ * from all the services that are bound to the container.
+ *
+ * This service injects couple of utilities into the global scope:
+ *  - `_getService(id: string): Service | undefined` - Returns the service instance with the given ID or undefined.
+ *  - `_getBoundServiceIDs(): string[]` - Returns the IDs of all the bound services.
+ */
+export class DebugService extends Service {
+  public static readonly ID = "DEBUG_SERVICE"
+
+  constructor() {
+    super()
+
+    console.log("DebugService is initialized...")
+
+    const container = this.getContainer()
+
+    // Log container events
+    container.getEventStream().subscribe((event) => {
+      if (event.type === "SERVICE_BIND") {
+        console.log(
+          "[CONTAINER] Service Bind:",
+          event.bounderID ?? "<CONTAINER>",
+          "->",
+          event.boundeeID
+        )
+      } else if (event.type === "SERVICE_INIT") {
+        console.log("[CONTAINER] Service Init:", event.serviceID)
+
+        // Subscribe to event stream of the newly initialized service
+        const service = container.getBoundServiceWithID(event.serviceID)
+
+        service?.getEventStream().subscribe((ev: any) => {
+          console.log(`[${event.serviceID}] Event:`, ev)
+        })
+      }
+    })
+
+    // Subscribe to event stream of all already bound services (if any)
+    for (const [id, service] of container.getBoundServices()) {
+      service.getEventStream().subscribe((event: any) => {
+        console.log(`[${id}]`, event)
+      })
+    }
+
+    // Inject debug utilities into the global scope
+    ;(window as any)._getService = this.getService.bind(this)
+    ;(window as any)._getBoundServiceIDs = this.getBoundServiceIDs.bind(this)
+  }
+
+  private getBoundServiceIDs() {
+    return Array.from(this.getContainer().getBoundServices()).map(([id]) => id)
+  }
+
+  private getService(id: string) {
+    return this.getContainer().getBoundServiceWithID(id)
+  }
+}

packages/hoppscotch-common/src/services/spotlight/__tests__/index.spec.ts

@@ -0,0 +1,550 @@
+import { describe, it, expect, vi, beforeEach } from "vitest"
+import {
+  SpotlightSearcher,
+  SpotlightSearcherSessionState,
+  SpotlightSearcherResult,
+  SpotlightService,
+} from "../"
+import { Ref, computed, nextTick, ref, watch } from "vue"
+import { TestContainer } from "dioc/testing"
+
+const echoSearcher: SpotlightSearcher = {
+  searcherID: "echo-searcher",
+  searcherSectionTitle: "Echo Searcher",
+  createSearchSession: (query: Readonly<Ref<string>>) => {
+    // A basic searcher that returns the query string as the sole result
+    const loading = ref(false)
+    const results = ref<SpotlightSearcherResult[]>([])
+
+    watch(
+      query,
+      (query) => {
+        loading.value = true
+
+        results.value = [
+          {
+            id: "searcher-a-result",
+            text: {
+              type: "text",
+              text: query,
+            },
+            icon: {},
+            score: 1,
+          },
+        ]
+
+        loading.value = false
+      },
+      { immediate: true }
+    )
+
+    const onSessionEnd = () => {
+      /* noop */
+    }
+
+    return [
+      computed<SpotlightSearcherSessionState>(() => ({
+        loading: loading.value,
+        results: results.value,
+      })),
+      onSessionEnd,
+    ]
+  },
+
+  onResultSelect: () => {
+    /* noop */
+  },
+}
+
+const emptySearcher: SpotlightSearcher = {
+  searcherID: "empty-searcher",
+  searcherSectionTitle: "Empty Searcher",
+  createSearchSession: () => {
+    const loading = ref(false)
+
+    return [
+      computed<SpotlightSearcherSessionState>(() => ({
+        loading: loading.value,
+        results: [],
+      })),
+      () => {
+        /* noop */
+      },
+    ]
+  },
+  onResultSelect: () => {
+    /* noop */
+  },
+}
+
+describe("SpotlightService", () => {
+  describe("registerSearcher", () => {
+    it("registers a searcher with a given ID", () => {
+      const container = new TestContainer()
+
+      const spotlight = container.bind(SpotlightService)
+      spotlight.registerSearcher(echoSearcher)
+
+      const [id, searcher] = spotlight.getAllSearchers().next().value
+
+      expect(id).toEqual("echo-searcher")
+      expect(searcher).toBe(echoSearcher)
+    })
+
+    it("if 2 searchers are registered with the same ID, the last one overwrites the first one", () => {
+      const echoSearcherFake: SpotlightSearcher = {
+        searcherID: "echo-searcher",
+        searcherSectionTitle: "Echo Searcher",
+        createSearchSession: () => {
+          throw new Error("not implemented")
+        },
+        onResultSelect: () => {
+          throw new Error("not implemented")
+        },
+      }
+
+      const container = new TestContainer()
+
+      const spotlight = container.bind(SpotlightService)
+      spotlight.registerSearcher(echoSearcher)
+      spotlight.registerSearcher(echoSearcherFake)
+
+      const [id, searcher] = spotlight.getAllSearchers().next().value
+
+      expect(id).toEqual("echo-searcher")
+      expect(searcher).toBe(echoSearcherFake)
+    })
+  })
+
+  describe("createSearchSession", () => {
+    it("when the source query changes, the searchers are notified", async () => {
+      const container = new TestContainer()
+
+      const notifiedFn = vi.fn()
+
+      const sampleSearcher: SpotlightSearcher = {
+        searcherID: "searcher",
+        searcherSectionTitle: "Searcher",
+        createSearchSession: (query) => {
+          const stop = watch(query, notifiedFn, { immediate: true })
+
+          return [
+            ref<SpotlightSearcherSessionState>({
+              loading: false,
+              results: [],
+            }),
+            () => {
+              stop()
+            },
+          ]
+        },
+        onResultSelect: () => {
+          /* noop */
+        },
+      }
+
+      const spotlight = container.bind(SpotlightService)
+      spotlight.registerSearcher(sampleSearcher)
+
+      const query = ref("test")
+
+      const [, dispose] = spotlight.createSearchSession(query)
+
+      query.value = "test2"
+      await nextTick()
+
+      expect(notifiedFn).toHaveBeenCalledTimes(2)
+
+      dispose()
+    })
+
+    it("when a searcher returns results, they are added to the results", async () => {
+      const container = new TestContainer()
+
+      const spotlight = container.bind(SpotlightService)
+      spotlight.registerSearcher(echoSearcher)
+
+      const query = ref("test")
+      const [session, dispose] = spotlight.createSearchSession(query)
+      await nextTick()
+
+      expect(session.value.results).toHaveProperty("echo-searcher")
+      expect(session.value.results["echo-searcher"]).toEqual({
+        title: "Echo Searcher",
+        avgScore: 1,
+        results: [
+          {
+            id: "searcher-a-result",
+            text: {
+              type: "text",
+              text: "test",
+            },
+            icon: {},
+            score: 1,
+          },
+        ],
+      })
+
+      dispose()
+    })
+
+    it("when a searcher does not return any results, they are not added to the results", () => {
+      const container = new TestContainer()
+
+      const spotlight = container.bind(SpotlightService)
+      spotlight.registerSearcher(emptySearcher)
+
+      const query = ref("test")
+      const [session, dispose] = spotlight.createSearchSession(query)
+
+      expect(session.value.results).not.toHaveProperty("empty-searcher")
+      expect(session.value.results).toEqual({})
+
+      dispose()
+    })
+
+    it("when any of the searchers report they are loading, the search session says it is loading", () => {
+      const container = new TestContainer()
+
+      const loadingSearcher: SpotlightSearcher = {
+        searcherID: "loading-searcher",
+        searcherSectionTitle: "Loading Searcher",
+        createSearchSession: () => {
+          const loading = ref(true)
+          const results = ref<SpotlightSearcherResult[]>([])
+
+          return [
+            computed<SpotlightSearcherSessionState>(() => ({
+              loading: loading.value,
+              results: results.value,
+            })),
+            () => {
+              /* noop */
+            },
+          ]
+        },
+        onResultSelect: () => {
+          /* noop */
+        },
+      }
+
+      const spotlight = container.bind(SpotlightService)
+      spotlight.registerSearcher(loadingSearcher)
+      spotlight.registerSearcher(echoSearcher)
+
+      const query = ref("test")
+      const [session, dispose] = spotlight.createSearchSession(query)
+
+      expect(session.value.loading).toBe(true)
+
+      dispose()
+    })
+
+    it("when all of the searchers report they are not loading, the search session says it is not loading", () => {
+      const container = new TestContainer()
+
+      const spotlight = container.bind(SpotlightService)
+      spotlight.registerSearcher(echoSearcher)
+      spotlight.registerSearcher(emptySearcher)
+
+      const query = ref("test")
+      const [session, dispose] = spotlight.createSearchSession(query)
+
+      expect(session.value.loading).toBe(false)
+
+      dispose()
+    })
+
+    it("when a searcher changes its loading state after a while, the search session state updates", async () => {
+      const container = new TestContainer()
+
+      const loading = ref(true)
+
+      const loadingSearcher: SpotlightSearcher = {
+        searcherID: "loading-searcher",
+        searcherSectionTitle: "Loading Searcher",
+        createSearchSession: () => {
+          return [
+            computed<SpotlightSearcherSessionState>(() => ({
+              loading: loading.value,
+              results: [],
+            })),
+            () => {
+              /* noop */
+            },
+          ]
+        },
+        onResultSelect: () => {
+          /* noop */
+        },
+      }
+
+      const spotlight = container.bind(SpotlightService)
+      spotlight.registerSearcher(loadingSearcher)
+
+      const query = ref("test")
+      const [session, dispose] = spotlight.createSearchSession(query)
+
+      expect(session.value.loading).toBe(true)
+
+      loading.value = false
+
+      await nextTick()
+
+      expect(session.value.loading).toBe(false)
+
+      dispose()
+    })
+
+    it("when the searcher updates its results, the search session state updates", async () => {
+      const container = new TestContainer()
+
+      const spotlight = container.bind(SpotlightService)
+      spotlight.registerSearcher(echoSearcher)
+
+      const query = ref("test")
+      const [session, dispose] = spotlight.createSearchSession(query)
+
+      expect(session.value.results).toHaveProperty("echo-searcher")
+      expect(session.value.results["echo-searcher"]).toEqual({
+        title: "Echo Searcher",
+        avgScore: 1,
+        results: [
+          {
+            id: "searcher-a-result",
+            text: {
+              type: "text",
+              text: "test",
+            },
+            icon: {},
+            score: 1,
+          },
+        ],
+      })
+
+      query.value = "test2"
+      await nextTick()
+
+      expect(session.value.results).toHaveProperty("echo-searcher")
+      expect(session.value.results["echo-searcher"]).toEqual({
+        title: "Echo Searcher",
+        avgScore: 1,
+        results: [
+          {
+            id: "searcher-a-result",
+            text: {
+              type: "text",
+              text: "test2",
+            },
+            icon: {},
+            score: 1,
+          },
+        ],
+      })
+
+      dispose()
+    })
+
+    it("when the returned dispose function is called, the searchers are notified", () => {
+      const container = new TestContainer()
+
+      const disposeFn = vi.fn()
+
+      const testSearcher: SpotlightSearcher = {
+        searcherID: "test-searcher",
+        searcherSectionTitle: "Test Searcher",
+        createSearchSession: () => {
+          return [
+            computed<SpotlightSearcherSessionState>(() => ({
+              loading: false,
+              results: [],
+            })),
+            disposeFn,
+          ]
+        },
+        onResultSelect: () => {
+          /* noop */
+        },
+      }
+
+      const spotlight = container.bind(SpotlightService)
+      spotlight.registerSearcher(testSearcher)
+
+      const query = ref("test")
+      const [, dispose] = spotlight.createSearchSession(query)
+
+      dispose()
+
+      expect(disposeFn).toHaveBeenCalledOnce()
+    })
+
+    it("when the search session is disposed, changes to the query are not notified to the searchers", async () => {
+      const container = new TestContainer()
+
+      const notifiedFn = vi.fn()
+
+      const testSearcher: SpotlightSearcher = {
+        searcherID: "test-searcher",
+        searcherSectionTitle: "Test Searcher",
+        createSearchSession: (query) => {
+          watch(query, notifiedFn, { immediate: true })
+
+          return [
+            computed<SpotlightSearcherSessionState>(() => ({
+              loading: false,
+              results: [],
+            })),
+            () => {
+              /* noop */
+            },
+          ]
+        },
+        onResultSelect: () => {
+          /* noop */
+        },
+      }
+
+      const spotlight = container.bind(SpotlightService)
+      spotlight.registerSearcher(testSearcher)
+
+      const query = ref("test")
+      const [, dispose] = spotlight.createSearchSession(query)
+
+      query.value = "test2"
+      await nextTick()
+
+      expect(notifiedFn).toHaveBeenCalledTimes(2)
+
+      dispose()
+
+      query.value = "test3"
+      await nextTick()
+
+      expect(notifiedFn).toHaveBeenCalledTimes(3)
+    })
+
+    describe("selectSearchResult", () => {
+      const onResultSelectFn = vi.fn()
+
+      const testSearcher: SpotlightSearcher = {
+        searcherID: "test-searcher",
+        searcherSectionTitle: "Test Searcher",
+        createSearchSession: () => {
+          return [
+            computed<SpotlightSearcherSessionState>(() => ({
+              loading: false,
+              results: [],
+            })),
+            () => {
+              /* noop */
+            },
+          ]
+        },
+        onResultSelect: onResultSelectFn,
+      }
+
+      beforeEach(() => {
+        onResultSelectFn.mockReset()
+      })
+
+      it("does nothing if the searcherID is invalid", () => {
+        const container = new TestContainer()
+
+        const spotlight = container.bind(SpotlightService)
+        spotlight.registerSearcher(testSearcher)
+
+        spotlight.selectSearchResult("invalid-searcher-id", {
+          id: "test-result",
+          text: {
+            type: "text",
+            text: "test",
+          },
+          icon: {},
+          score: 1,
+        })
+
+        expect(onResultSelectFn).not.toHaveBeenCalled()
+      })
+
+      it("calls the correspondig searcher's onResultSelect method", () => {
+        const container = new TestContainer()
+
+        const spotlight = container.bind(SpotlightService)
+        spotlight.registerSearcher(testSearcher)
+
+        spotlight.selectSearchResult("test-searcher", {
+          id: "test-result",
+          text: {
+            type: "text",
+            text: "test",
+          },
+          icon: {},
+          score: 1,
+        })
+
+        expect(onResultSelectFn).toHaveBeenCalledOnce()
+      })
+
+      it("passes the correct information to the searcher's onResultSelect method", () => {
+        const container = new TestContainer()
+
+        const spotlight = container.bind(SpotlightService)
+        spotlight.registerSearcher(testSearcher)
+
+        spotlight.selectSearchResult("test-searcher", {
+          id: "test-result",
+          text: {
+            type: "text",
+            text: "test",
+          },
+          icon: {},
+          score: 1,
+        })
+
+        expect(onResultSelectFn).toHaveBeenCalledWith({
+          id: "test-result",
+          text: {
+            type: "text",
+            text: "test",
+          },
+          icon: {},
+          score: 1,
+        })
+      })
+    })
+  })
+
+  describe("getAllSearchers", () => {
+    it("when no searchers are registered, it returns an empty array", () => {
+      const container = new TestContainer()
+
+      const spotlight = container.bind(SpotlightService)
+
+      expect(Array.from(spotlight.getAllSearchers())).toEqual([])
+    })
+
+    it("when a searcher is registered, it returns an array with a tuple of the searcher id and then then searcher", () => {
+      const container = new TestContainer()
+
+      const spotlight = container.bind(SpotlightService)
+      spotlight.registerSearcher(echoSearcher)
+
+      expect(Array.from(spotlight.getAllSearchers())).toEqual([
+        ["echo-searcher", echoSearcher],
+      ])
+    })
+
+    it("returns all registered searchers", () => {
+      const container = new TestContainer()
+
+      const spotlight = container.bind(SpotlightService)
+      spotlight.registerSearcher(echoSearcher)
+      spotlight.registerSearcher(emptySearcher)
+
+      expect(Array.from(spotlight.getAllSearchers())).toEqual([
+        ["echo-searcher", echoSearcher],
+        ["empty-searcher", emptySearcher],
+      ])
+    })
+  })
+})

packages/hoppscotch-common/src/services/spotlight/index.ts

@@ -0,0 +1,216 @@
+import { Service } from "dioc"
+import { watch, type Ref, ref, reactive, effectScope, Component } from "vue"
+
+/**
+ * Defines how to render the entry text in a Spotlight Search Result
+ */
+export type SpotlightResultTextType<T extends object | Component = never> =
+  | {
+      type: "text"
+      /**
+       * The text to render. Passing an array of strings will render each string separated by a chevron
+       */
+      text: string[] | string
+    }
+  | {
+      type: "custom"
+      /**
+       * The component to render in place of the text
+       */
+      component: T
+
+      /**
+       * The props to pass to the component
+       */
+      componentProps: T extends Component<infer Props> ? Props : never
+    }
+
+/**
+ * Defines info about a spotlight light so the UI can render it
+ */
+export type SpotlightSearcherResult = {
+  /**
+   * The unique ID of the result
+   */
+  id: string
+
+  /**
+   * The text to render in the result
+   */
+  text: SpotlightResultTextType<any>
+
+  /**
+   * The icon to render as the signifier of the result
+   */
+  icon: object | Component
+
+  /**
+   * The score of the result, the UI should sort the results by this
+   */
+  score: number
+
+  /**
+   * Additional metadata about the result
+   */
+  meta?: {
+    /**
+     * The keyboard shortcut to trigger the result
+     */
+    keyboardShortcut?: string[]
+  }
+}
+
+/**
+ * Defines the state of a searcher during a spotlight search session
+ */
+export type SpotlightSearcherSessionState = {
+  /**
+   * Whether the searcher is currently loading results
+   */
+  loading: boolean
+
+  /**
+   * The results presented by the corresponding searcher in a session
+   */
+  results: SpotlightSearcherResult[]
+}
+
+export interface SpotlightSearcher {
+  searcherID: string
+  searcherSectionTitle: string
+
+  createSearchSession(
+    query: Readonly<Ref<string>>
+  ): [Ref<SpotlightSearcherSessionState>, () => void]
+
+  onResultSelect(result: SpotlightSearcherResult): void
+}
+
+/**
+ * Defines the state of a searcher during a search session that
+ * is exposed to through the spotlight service
+ */
+export type SpotlightSearchSearcherState = {
+  title: string
+  avgScore: number
+  results: SpotlightSearcherResult[]
+}
+
+/**
+ * Defines the state of a spotlight search session
+ */
+export type SpotlightSearchState = {
+  /**
+   * Whether any of the searchers are currently loading results
+   */
+  loading: boolean
+
+  /**
+   * The results presented by the corresponding searcher in a session
+   */
+  results: Record<string, SpotlightSearchSearcherState>
+}
+
+export class SpotlightService extends Service {
+  public static readonly ID = "SPOTLIGHT_SERVICE"
+
+  private searchers: Map<string, SpotlightSearcher> = new Map()
+
+  /**
+   * Registers a searcher with the spotlight service
+   * @param searcher The searcher instance to register
+   */
+  public registerSearcher(searcher: SpotlightSearcher) {
+    this.searchers.set(searcher.searcherID, searcher)
+  }
+
+  /**
+   * Gets an iterator over all registered searchers and their IDs
+   */
+  public getAllSearchers(): IterableIterator<[string, SpotlightSearcher]> {
+    return this.searchers.entries()
+  }
+
+  /**
+   * Creates a new search session
+   * @param query A ref to the query to search for, updating this ref will notify the searchers about the change
+   * @returns A ref to the state of the search session and a function to end the session
+   */
+  public createSearchSession(
+    query: Ref<string>
+  ): [Ref<SpotlightSearchState>, () => void] {
+    const searchSessions = Array.from(this.searchers.values()).map(
+      (x) => [x, ...x.createSearchSession(query)] as const
+    )
+
+    const loadingSearchers = reactive(new Set())
+    const onSessionEndList: Array<() => void> = []
+
+    const resultObj = ref<SpotlightSearchState>({
+      loading: false,
+      results: {},
+    })
+
+    const scopeHandle = effectScope()
+
+    scopeHandle.run(() => {
+      for (const [searcher, state, onSessionEnd] of searchSessions) {
+        watch(
+          state,
+          (newState) => {
+            if (newState.loading) {
+              loadingSearchers.add(searcher.searcherID)
+            } else {
+              loadingSearchers.delete(searcher.searcherID)
+            }
+
+            if (newState.results.length === 0) {
+              delete resultObj.value.results[searcher.searcherID]
+            } else {
+              resultObj.value.results[searcher.searcherID] = {
+                title: searcher.searcherSectionTitle,
+                avgScore:
+                  newState.results.reduce((acc, x) => acc + x.score, 0) /
+                  newState.results.length,
+                results: newState.results,
+              }
+            }
+          },
+          { immediate: true }
+        )
+
+        onSessionEndList.push(onSessionEnd)
+      }
+
+      watch(
+        loadingSearchers,
+        (set) => {
+          resultObj.value.loading = set.size > 0
+        },
+        { immediate: true }
+      )
+    })
+
+    const onSearchEnd = () => {
+      scopeHandle.stop()
+
+      for (const onEnd of onSessionEndList) {
+        onEnd()
+      }
+    }
+
+    return [resultObj, onSearchEnd]
+  }
+
+  /**
+   * Selects a search result. To be called when the user selects a result
+   * @param searcherID The ID of the searcher that the result belongs to
+   * @param result The resuklt to look at
+   */
+  public selectSearchResult(
+    searcherID: string,
+    result: SpotlightSearcherResult
+  ) {
+    this.searchers.get(searcherID)?.onResultSelect(result)
+  }
+}

packages/hoppscotch-common/src/services/spotlight/searchers/__tests__/history.searcher.spec.ts

@@ -0,0 +1,444 @@
+import { TestContainer } from "dioc/testing"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import { HistorySpotlightSearcherService } from "../history.searcher"
+import { nextTick, ref } from "vue"
+import { SpotlightService } from "../.."
+import { GQLHistoryEntry, RESTHistoryEntry } from "~/newstore/history"
+import { getDefaultRESTRequest } from "~/helpers/rest/default"
+import { HoppAction, HoppActionWithArgs } from "~/helpers/actions"
+import { defaultGQLSession } from "~/newstore/GQLSession"
+
+async function flushPromises() {
+  return await new Promise((r) => setTimeout(r))
+}
+
+const tabMock = vi.hoisted(() => ({
+  createNewTab: vi.fn(),
+}))
+
+vi.mock("~/helpers/rest/tab", () => ({
+  __esModule: true,
+  createNewTab: tabMock.createNewTab,
+}))
+
+vi.mock("~/modules/i18n", () => ({
+  __esModule: true,
+  getI18n: () => (x: string) => x,
+}))
+
+const actionsMock = vi.hoisted(() => ({
+  value: [] as (HoppAction | HoppActionWithArgs)[],
+  invokeAction: vi.fn(),
+}))
+
+vi.mock("~/helpers/actions", async () => {
+  const { BehaviorSubject }: any = await vi.importActual("rxjs")
+
+  return {
+    __esModule: true,
+    activeActions$: new BehaviorSubject(actionsMock.value),
+    invokeAction: actionsMock.invokeAction,
+  }
+})
+
+const historyMock = vi.hoisted(() => ({
+  restEntries: [] as RESTHistoryEntry[],
+  gqlEntries: [] as GQLHistoryEntry[],
+}))
+
+vi.mock("~/newstore/history", () => ({
+  __esModule: true,
+  restHistoryStore: {
+    value: {
+      state: historyMock.restEntries,
+    },
+  },
+  graphqlHistoryStore: {
+    value: {
+      state: historyMock.gqlEntries,
+    },
+  },
+}))
+
+describe("HistorySpotlightSearcherService", () => {
+  beforeEach(() => {
+    let x = actionsMock.value.pop()
+    while (x) {
+      x = actionsMock.value.pop()
+    }
+
+    let y = historyMock.restEntries.pop()
+    while (y) {
+      y = historyMock.restEntries.pop()
+    }
+
+    actionsMock.invokeAction.mockReset()
+    tabMock.createNewTab.mockReset()
+  })
+
+  it("registers with the spotlight service upon initialization", async () => {
+    const container = new TestContainer()
+
+    const registerSearcherFn = vi.fn()
+
+    container.bindMock(SpotlightService, {
+      registerSearcher: registerSearcherFn,
+    })
+
+    const history = container.bind(HistorySpotlightSearcherService)
+    await flushPromises()
+
+    expect(registerSearcherFn).toHaveBeenCalledOnce()
+    expect(registerSearcherFn).toHaveBeenCalledWith(history)
+  })
+
+  it("returns a clear history result if the action is available", async () => {
+    const container = new TestContainer()
+
+    actionsMock.value.push("history.clear")
+    const history = container.bind(HistorySpotlightSearcherService)
+    await flushPromises()
+
+    const query = ref("his")
+    const [result] = history.createSearchSession(query)
+    await nextTick()
+
+    expect(result.value.results).toContainEqual(
+      expect.objectContaining({
+        id: "clear-history",
+      })
+    )
+  })
+
+  it("doesn't return a clear history result if the action is not available", async () => {
+    const container = new TestContainer()
+
+    const history = container.bind(HistorySpotlightSearcherService)
+    await flushPromises()
+
+    const query = ref("his")
+    const [result] = history.createSearchSession(query)
+    await nextTick()
+
+    expect(result.value.results).not.toContainEqual(
+      expect.objectContaining({
+        id: "clear-history",
+      })
+    )
+  })
+
+  it("selecting a clear history entry invokes the clear history action", async () => {
+    const container = new TestContainer()
+
+    actionsMock.value.push("history.clear")
+    const history = container.bind(HistorySpotlightSearcherService)
+    await flushPromises()
+
+    const query = ref("his")
+    const [result] = history.createSearchSession(query)
+    await nextTick()
+
+    history.onResultSelect(result.value.results[0])
+
+    expect(actionsMock.invokeAction).toHaveBeenCalledOnce()
+    expect(actionsMock.invokeAction).toHaveBeenCalledWith("history.clear")
+  })
+
+  it("returns all the valid rest history entries for the search term", async () => {
+    actionsMock.value.push("rest.request.open")
+
+    historyMock.restEntries.push({
+      request: {
+        ...getDefaultRESTRequest(),
+        endpoint: "bla.com",
+      },
+      responseMeta: {
+        duration: null,
+        statusCode: null,
+      },
+      star: false,
+      v: 1,
+      updatedOn: new Date(),
+    })
+
+    const container = new TestContainer()
+
+    const history = container.bind(HistorySpotlightSearcherService)
+    await flushPromises()
+
+    const query = ref("bla")
+    const [result] = history.createSearchSession(query)
+    await nextTick()
+
+    expect(result.value.results).toContainEqual(
+      expect.objectContaining({
+        id: "rest-0",
+        text: {
+          type: "custom",
+          component: expect.anything(),
+          componentProps: expect.objectContaining({
+            historyEntry: historyMock.restEntries[0],
+          }),
+        },
+      })
+    )
+  })
+
+  it("selecting a rest history entry invokes action to open the rest request", async () => {
+    actionsMock.value.push("rest.request.open")
+
+    const historyEntry: RESTHistoryEntry = {
+      request: {
+        ...getDefaultRESTRequest(),
+        endpoint: "bla.com",
+      },
+      responseMeta: {
+        duration: null,
+        statusCode: null,
+      },
+      star: false,
+      v: 1,
+      updatedOn: new Date(),
+    }
+
+    historyMock.restEntries.push(historyEntry)
+
+    const container = new TestContainer()
+
+    const history = container.bind(HistorySpotlightSearcherService)
+    await flushPromises()
+
+    const query = ref("bla")
+    const [result] = history.createSearchSession(query)
+    await nextTick()
+
+    const doc = result.value.results[0]
+
+    history.onResultSelect(doc)
+
+    expect(actionsMock.invokeAction).toHaveBeenCalledOnce()
+    expect(actionsMock.invokeAction).toHaveBeenCalledWith("rest.request.open", {
+      doc: {
+        request: historyEntry.request,
+        isDirty: false,
+      },
+    })
+  })
+
+  it("returns all the valid graphql history entries for the search term", async () => {
+    actionsMock.value.push("gql.request.open")
+
+    historyMock.gqlEntries.push({
+      request: {
+        ...defaultGQLSession.request,
+        url: "bla.com",
+      },
+      response: "{}",
+      star: false,
+      v: 1,
+      updatedOn: new Date(),
+    })
+
+    const container = new TestContainer()
+
+    const history = container.bind(HistorySpotlightSearcherService)
+    await flushPromises()
+
+    const query = ref("bla")
+    const [result] = history.createSearchSession(query)
+    await nextTick()
+
+    expect(result.value.results).toContainEqual(
+      expect.objectContaining({
+        id: "gql-0",
+        text: {
+          type: "custom",
+          component: expect.anything(),
+          componentProps: expect.objectContaining({
+            historyEntry: historyMock.gqlEntries[0],
+          }),
+        },
+      })
+    )
+  })
+
+  it("selecting a graphql history entry invokes action to open the graphql request", async () => {
+    actionsMock.value.push("gql.request.open")
+
+    const historyEntry: GQLHistoryEntry = {
+      request: {
+        ...defaultGQLSession.request,
+        url: "bla.com",
+      },
+      response: "{}",
+      star: false,
+      v: 1,
+      updatedOn: new Date(),
+    }
+
+    historyMock.gqlEntries.push(historyEntry)
+
+    const container = new TestContainer()
+
+    const history = container.bind(HistorySpotlightSearcherService)
+    await flushPromises()
+
+    const query = ref("bla")
+    const [result] = history.createSearchSession(query)
+    await nextTick()
+
+    const doc = result.value.results[0]
+
+    history.onResultSelect(doc)
+
+    expect(actionsMock.invokeAction).toHaveBeenCalledOnce()
+    expect(actionsMock.invokeAction).toHaveBeenCalledWith("gql.request.open", {
+      request: historyEntry.request,
+    })
+  })
+
+  it("rest history entries are not shown when the rest open action is not registered", async () => {
+    actionsMock.value.push("gql.request.open")
+
+    historyMock.gqlEntries.push({
+      request: {
+        ...defaultGQLSession.request,
+        url: "bla.com",
+      },
+      response: "{}",
+      star: false,
+      v: 1,
+      updatedOn: new Date(),
+    })
+
+    historyMock.restEntries.push({
+      request: {
+        ...getDefaultRESTRequest(),
+        endpoint: "bla.com",
+      },
+      responseMeta: {
+        duration: null,
+        statusCode: null,
+      },
+      star: false,
+      v: 1,
+      updatedOn: new Date(),
+    })
+
+    const container = new TestContainer()
+
+    const history = container.bind(HistorySpotlightSearcherService)
+    await flushPromises()
+
+    const query = ref("bla")
+    const [result] = history.createSearchSession(query)
+    await nextTick()
+
+    expect(result.value.results).toContainEqual(
+      expect.objectContaining({
+        id: expect.stringMatching(/^gql/),
+      })
+    )
+    expect(result.value.results).not.toContainEqual(
+      expect.objectContaining({
+        id: expect.stringMatching(/^rest/),
+      })
+    )
+  })
+
+  it("gql history entries are not shown when the gql open action is not registered", async () => {
+    actionsMock.value.push("rest.request.open")
+
+    historyMock.gqlEntries.push({
+      request: {
+        ...defaultGQLSession.request,
+        url: "bla.com",
+      },
+      response: "{}",
+      star: false,
+      v: 1,
+      updatedOn: new Date(),
+    })
+
+    historyMock.restEntries.push({
+      request: {
+        ...getDefaultRESTRequest(),
+        endpoint: "bla.com",
+      },
+      responseMeta: {
+        duration: null,
+        statusCode: null,
+      },
+      star: false,
+      v: 1,
+      updatedOn: new Date(),
+    })
+
+    const container = new TestContainer()
+
+    const history = container.bind(HistorySpotlightSearcherService)
+    await flushPromises()
+
+    const query = ref("bla")
+    const [result] = history.createSearchSession(query)
+    await nextTick()
+
+    expect(result.value.results).toContainEqual(
+      expect.objectContaining({
+        id: expect.stringMatching(/^rest/),
+      })
+    )
+    expect(result.value.results).not.toContainEqual(
+      expect.objectContaining({
+        id: expect.stringMatching(/^gql/),
+      })
+    )
+  })
+
+  it("none of the history entries are show when neither of the open actions are registered", async () => {
+    historyMock.gqlEntries.push({
+      request: {
+        ...defaultGQLSession.request,
+        url: "bla.com",
+      },
+      response: "{}",
+      star: false,
+      v: 1,
+      updatedOn: new Date(),
+    })
+
+    historyMock.restEntries.push({
+      request: {
+        ...getDefaultRESTRequest(),
+        endpoint: "bla.com",
+      },
+      responseMeta: {
+        duration: null,
+        statusCode: null,
+      },
+      star: false,
+      v: 1,
+      updatedOn: new Date(),
+    })
+
+    const container = new TestContainer()
+
+    const history = container.bind(HistorySpotlightSearcherService)
+    await flushPromises()
+
+    const query = ref("bla")
+    const [result] = history.createSearchSession(query)
+    await nextTick()
+
+    expect(result.value.results).not.toContainEqual(
+      expect.objectContaining({
+        id: expect.stringMatching(/^rest/),
+      })
+    )
+    expect(result.value.results).not.toContainEqual(
+      expect.objectContaining({
+        id: expect.stringMatching(/^gql/),
+      })
+    )
+  })
+})

packages/hoppscotch-common/src/services/spotlight/searchers/__tests__/user.searcher.spec.ts

@@ -0,0 +1,192 @@
+import { beforeEach, describe, it, expect, vi } from "vitest"
+import { TestContainer } from "dioc/testing"
+import { UserSpotlightSearcherService } from "../user.searcher"
+import { nextTick, ref } from "vue"
+import { SpotlightService } from "../.."
+
+async function flushPromises() {
+  return await new Promise((r) => setTimeout(r))
+}
+
+vi.mock("~/modules/i18n", () => ({
+  __esModule: true,
+  getI18n: () => (x: string) => x,
+}))
+
+const actionsMock = vi.hoisted(() => ({
+  value: ["user.login"],
+  invokeAction: vi.fn(),
+}))
+
+vi.mock("~/helpers/actions", async () => {
+  const { BehaviorSubject }: any = await vi.importActual("rxjs")
+
+  return {
+    __esModule: true,
+    activeActions$: new BehaviorSubject(actionsMock.value),
+    invokeAction: actionsMock.invokeAction,
+  }
+})
+
+describe("UserSearcher", () => {
+  beforeEach(() => {
+    let x = actionsMock.value.pop()
+    while (x) {
+      x = actionsMock.value.pop()
+    }
+
+    actionsMock.invokeAction.mockReset()
+  })
+
+  it("registers with the spotlight service upon initialization", async () => {
+    const container = new TestContainer()
+
+    const registerSearcherFn = vi.fn()
+
+    container.bindMock(SpotlightService, {
+      registerSearcher: registerSearcherFn,
+    })
+
+    const user = container.bind(UserSpotlightSearcherService)
+    await flushPromises()
+
+    expect(registerSearcherFn).toHaveBeenCalledOnce()
+    expect(registerSearcherFn).toHaveBeenCalledWith(user)
+  })
+
+  it("if login action is available, the search result should have the login result", async () => {
+    const container = new TestContainer()
+
+    actionsMock.value.push("user.login")
+    const user = container.bind(UserSpotlightSearcherService)
+    await flushPromises()
+
+    const query = ref("log")
+    const result = user.createSearchSession(query)[0]
+    await nextTick()
+
+    expect(result.value.results).toContainEqual(
+      expect.objectContaining({
+        id: "login",
+      })
+    )
+  })
+
+  it("if login action is not available, the search result should not have the login result", async () => {
+    const container = new TestContainer()
+
+    const user = container.bind(UserSpotlightSearcherService)
+    await flushPromises()
+
+    const query = ref("log")
+    const result = user.createSearchSession(query)[0]
+    await nextTick()
+
+    expect(result.value.results).not.toContainEqual(
+      expect.objectContaining({
+        id: "login",
+      })
+    )
+  })
+
+  it("if logout action is available, the search result should have the logout result", async () => {
+    const container = new TestContainer()
+
+    actionsMock.value.push("user.logout")
+    const user = container.bind(UserSpotlightSearcherService)
+    await flushPromises()
+
+    const query = ref("log")
+    const result = user.createSearchSession(query)[0]
+    await nextTick()
+
+    expect(result.value.results).toContainEqual(
+      expect.objectContaining({
+        id: "logout",
+      })
+    )
+  })
+
+  it("if logout action is not available, the search result should not have the logout result", async () => {
+    const container = new TestContainer()
+
+    const user = container.bind(UserSpotlightSearcherService)
+    await flushPromises()
+
+    const query = ref("log")
+    const result = user.createSearchSession(query)[0]
+    await nextTick()
+
+    expect(result.value.results).not.toContainEqual(
+      expect.objectContaining({
+        id: "logout",
+      })
+    )
+  })
+
+  it("if login action and logout action are available, the search result should have both results", async () => {
+    const container = new TestContainer()
+
+    actionsMock.value.push("user.login", "user.logout")
+    const user = container.bind(UserSpotlightSearcherService)
+    await flushPromises()
+
+    const query = ref("log")
+    const result = user.createSearchSession(query)[0]
+    await nextTick()
+
+    expect(result.value.results).toContainEqual(
+      expect.objectContaining({
+        id: "logout",
+      })
+    )
+
+    expect(result.value.results).toContainEqual(
+      expect.objectContaining({
+        id: "login",
+      })
+    )
+  })
+
+  it("selecting the login event should invoke the login action", () => {
+    const container = new TestContainer()
+
+    actionsMock.value.push("user.login")
+    const user = container.bind(UserSpotlightSearcherService)
+    const query = ref("log")
+
+    user.createSearchSession(query)[0]
+
+    user.onDocSelected("login")
+
+    expect(actionsMock.invokeAction).toHaveBeenCalledOnce()
+    expect(actionsMock.invokeAction).toHaveBeenCalledWith("user.login")
+  })
+
+  it("selecting the logout event should invoke the logout action", () => {
+    const container = new TestContainer()
+
+    actionsMock.value.push("user.logout")
+    const user = container.bind(UserSpotlightSearcherService)
+    const query = ref("log")
+
+    user.createSearchSession(query)[0]
+
+    user.onDocSelected("logout")
+    expect(actionsMock.invokeAction).toHaveBeenCalledOnce()
+    expect(actionsMock.invokeAction).toHaveBeenCalledWith("user.logout")
+  })
+
+  it("selecting an invalid event should not invoke any action", () => {
+    const container = new TestContainer()
+
+    actionsMock.value.push("user.logout")
+    const user = container.bind(UserSpotlightSearcherService)
+    const query = ref("log")
+
+    user.createSearchSession(query)[0]
+
+    user.onDocSelected("bla")
+    expect(actionsMock.invokeAction).not.toHaveBeenCalled()
+  })
+})

packages/hoppscotch-common/src/services/spotlight/searchers/base/__tests__/static.searcher.spec.ts

@@ -0,0 +1,403 @@
+import { describe, it, expect, vi } from "vitest"
+import {
+  SearchResult,
+  StaticSpotlightSearcherService,
+} from "../static.searcher"
+import { nextTick, reactive, ref } from "vue"
+import { SpotlightSearcherResult } from "../../.."
+import { TestContainer } from "dioc/testing"
+
+async function flushPromises() {
+  return await new Promise((r) => setTimeout(r))
+}
+
+describe("StaticSpotlightSearcherService", () => {
+  it("returns docs that have excludeFromSearch set to false", async () => {
+    class TestSearcherService extends StaticSpotlightSearcherService<
+      Record<string, any>
+    > {
+      public static readonly ID = "TEST_SEARCHER_SERVICE"
+
+      public readonly searcherID = "test"
+      public searcherSectionTitle = "test"
+
+      private documents: Record<string, any> = reactive({
+        login: {
+          text: "Login",
+          excludeFromSearch: false,
+        },
+        logout: {
+          text: "Logout",
+          excludeFromSearch: false,
+        },
+      })
+
+      constructor() {
+        super({
+          searchFields: ["text"],
+          fieldWeights: {},
+        })
+
+        this.setDocuments(this.documents)
+      }
+
+      protected getSearcherResultForSearchResult(
+        result: SearchResult<Record<string, any>>
+      ): SpotlightSearcherResult {
+        return {
+          id: result.id,
+          icon: {},
+          text: { type: "text", text: result.doc.text },
+          score: result.score,
+        }
+      }
+
+      public onDocSelected(): void {
+        // noop
+      }
+    }
+
+    const container = new TestContainer()
+
+    const service = container.bind(TestSearcherService)
+    await flushPromises()
+
+    const query = ref("log")
+
+    const [results] = service.createSearchSession(query)
+    await nextTick()
+
+    expect(results.value.results).toContainEqual(
+      expect.objectContaining({
+        id: "login",
+      })
+    )
+  })
+
+  it("doesn't return docs that have excludeFromSearch set to true", async () => {
+    class TestSearcherServiceB extends StaticSpotlightSearcherService<
+      Record<string, any>
+    > {
+      public static readonly ID = "TEST_SEARCHER_SERVICE_B"
+
+      public readonly searcherID = "test"
+      public searcherSectionTitle = "test"
+
+      private documents: Record<string, any> = reactive({
+        login: {
+          text: "Login",
+          excludeFromSearch: true,
+        },
+        logout: {
+          text: "Logout",
+          excludeFromSearch: false,
+        },
+      })
+
+      constructor() {
+        super({
+          searchFields: ["text"],
+          fieldWeights: {},
+        })
+
+        this.setDocuments(this.documents)
+      }
+
+      protected getSearcherResultForSearchResult(
+        result: SearchResult<Record<string, any>>
+      ): SpotlightSearcherResult {
+        return {
+          id: result.id,
+          icon: {},
+          text: { type: "text", text: result.doc.text },
+          score: result.score,
+        }
+      }
+
+      public onDocSelected(): void {
+        // noop
+      }
+    }
+
+    const container = new TestContainer()
+
+    const service = container.bind(TestSearcherServiceB)
+    await flushPromises()
+
+    const query = ref("log")
+    const [results] = service.createSearchSession(query)
+    await nextTick()
+
+    expect(results.value.results).not.toContainEqual(
+      expect.objectContaining({
+        id: "login",
+      })
+    )
+
+    expect(results.value.results).toContainEqual(
+      expect.objectContaining({
+        id: "logout",
+      })
+    )
+  })
+
+  it("returns docs that have excludeFromSearch set to undefined", async () => {
+    class TestSearcherServiceC extends StaticSpotlightSearcherService<
+      Record<string, any>
+    > {
+      public static readonly ID = "TEST_SEARCHER_SERVICE_C"
+
+      public readonly searcherID = "test"
+      public searcherSectionTitle = "test"
+
+      private documents: Record<string, any> = reactive({
+        login: {
+          text: "Login",
+        },
+        logout: {
+          text: "Logout",
+        },
+      })
+
+      constructor() {
+        super({
+          searchFields: ["text"],
+          fieldWeights: {},
+        })
+
+        this.setDocuments(this.documents)
+      }
+
+      protected getSearcherResultForSearchResult(
+        result: SearchResult<Record<string, any>>
+      ): SpotlightSearcherResult {
+        return {
+          id: result.id,
+          icon: {},
+          text: { type: "text", text: result.doc.text },
+          score: result.score,
+        }
+      }
+
+      public onDocSelected(): void {
+        // noop
+      }
+    }
+
+    const container = new TestContainer()
+
+    const service = container.bind(TestSearcherServiceC)
+    await flushPromises()
+
+    const query = ref("log")
+    const [results] = service.createSearchSession(query)
+    await nextTick()
+
+    expect(results.value.results).toContainEqual(
+      expect.objectContaining({
+        id: "login",
+      })
+    )
+
+    expect(results.value.results).toContainEqual(
+      expect.objectContaining({
+        id: "logout",
+      })
+    )
+  })
+
+  it("onDocSelected is called with a valid doc id and doc when onResultSelect is called", async () => {
+    class TestSearcherServiceD extends StaticSpotlightSearcherService<
+      Record<string, any>
+    > {
+      public static readonly ID = "TEST_SEARCHER_SERVICE_D"
+
+      public readonly searcherID = "test"
+      public searcherSectionTitle = "test"
+
+      public documents: Record<string, any> = reactive({
+        login: {
+          text: "Login",
+        },
+        logout: {
+          text: "Logout",
+        },
+      })
+
+      constructor() {
+        super({
+          searchFields: ["text"],
+          fieldWeights: {},
+        })
+
+        this.setDocuments(this.documents)
+      }
+
+      protected getSearcherResultForSearchResult(
+        result: SearchResult<Record<string, any>>
+      ): SpotlightSearcherResult {
+        return {
+          id: result.id,
+          icon: {},
+          text: { type: "text", text: result.doc.text },
+          score: result.score,
+        }
+      }
+
+      public onDocSelected = vi.fn()
+    }
+
+    const container = new TestContainer()
+
+    const service = container.bind(TestSearcherServiceD)
+    await flushPromises()
+
+    const query = ref("log")
+    const [results] = service.createSearchSession(query)
+    await nextTick()
+
+    const doc = results.value.results[0]
+
+    service.onResultSelect(doc)
+
+    expect(service.onDocSelected).toHaveBeenCalledOnce()
+    expect(service.onDocSelected).toHaveBeenCalledWith(
+      doc.id,
+      service.documents["login"]
+    )
+  })
+
+  it("returns search results from entries as specified by getSearcherResultForSearchResult", async () => {
+    class TestSearcherServiceE extends StaticSpotlightSearcherService<
+      Record<string, any>
+    > {
+      public static readonly ID = "TEST_SEARCHER_SERVICE_E"
+
+      public readonly searcherID = "test"
+      public searcherSectionTitle = "test"
+
+      public documents: Record<string, any> = reactive({
+        login: {
+          text: "Login",
+        },
+        logout: {
+          text: "Logout",
+        },
+      })
+
+      constructor() {
+        super({
+          searchFields: ["text"],
+          fieldWeights: {},
+        })
+
+        this.setDocuments(this.documents)
+      }
+
+      protected getSearcherResultForSearchResult(
+        result: SearchResult<Record<string, any>>
+      ): SpotlightSearcherResult {
+        return {
+          id: result.id,
+          icon: {},
+          text: { type: "text", text: result.doc.text.toUpperCase() },
+          score: result.score,
+        }
+      }
+
+      public onDocSelected(): void {
+        // noop
+      }
+    }
+
+    const container = new TestContainer()
+
+    const service = container.bind(TestSearcherServiceE)
+    await flushPromises()
+
+    const query = ref("log")
+    const [results] = service.createSearchSession(query)
+    await nextTick()
+
+    expect(results.value.results).toContainEqual(
+      expect.objectContaining({
+        id: "login",
+        text: { type: "text", text: "LOGIN" },
+      })
+    )
+
+    expect(results.value.results).toContainEqual(
+      expect.objectContaining({
+        id: "logout",
+        text: { type: "text", text: "LOGOUT" },
+      })
+    )
+  })
+
+  it("indexes the documents by the 'searchFields' property and obeys multiple index fields", async () => {
+    class TestSearcherServiceF extends StaticSpotlightSearcherService<
+      Record<string, any>
+    > {
+      public static readonly ID = "TEST_SEARCHER_SERVICE_F"
+
+      public readonly searcherID = "test"
+      public searcherSectionTitle = "test"
+
+      public documents: Record<string, any> = reactive({
+        login: {
+          text: "Login",
+          alternate: ["sign in"],
+        },
+        logout: {
+          text: "Logout",
+          alternate: ["sign out"],
+        },
+      })
+
+      constructor() {
+        super({
+          searchFields: ["text", "alternate"],
+          fieldWeights: {},
+        })
+
+        this.setDocuments(this.documents)
+      }
+
+      protected getSearcherResultForSearchResult(
+        result: SearchResult<Record<string, any>>
+      ): SpotlightSearcherResult {
+        return {
+          id: result.id,
+          icon: {},
+          text: { type: "text", text: result.doc.text },
+          score: result.score,
+        }
+      }
+
+      public onDocSelected(): void {
+        // noop
+      }
+    }
+
+    const container = new TestContainer()
+
+    const service = container.bind(TestSearcherServiceF)
+    await flushPromises()
+
+    const query = ref("sign")
+    const [results] = service.createSearchSession(query)
+    await nextTick()
+
+    expect(results.value.results).toContainEqual(
+      expect.objectContaining({
+        id: "login",
+      })
+    )
+
+    expect(results.value.results).toContainEqual(
+      expect.objectContaining({
+        id: "logout",
+      })
+    )
+  })
+})

packages/hoppscotch-common/src/services/spotlight/searchers/base/static.searcher.ts

@@ -0,0 +1,175 @@
+import { Service } from "dioc"
+import {
+  type SpotlightSearcher,
+  type SpotlightSearcherResult,
+  type SpotlightSearcherSessionState,
+} from "../.."
+import MiniSearch from "minisearch"
+import { Ref, computed, effectScope, ref, watch } from "vue"
+import { resolveUnref } from "@vueuse/core"
+
+/**
+ * Defines a search result and additional metadata returned by a StaticSpotlightSearcher
+ */
+export type SearchResult<Doc extends object & { excludeFromSearch?: boolean }> =
+  {
+    id: string
+    score: number
+    doc: Doc
+  }
+
+/**
+ * Options for StaticSpotlightSearcher initialization
+ */
+export type StaticSpotlightSearcherOptions<
+  Doc extends object & { excludeFromSearch?: boolean }
+> = {
+  /**
+   * The array of field names in the given documents to search against
+   */
+  searchFields: Array<keyof Doc>
+
+  /**
+   * The weights to apply to each field in the search, this allows for certain
+   * fields to have more priority than others in the search and update the score
+   */
+  fieldWeights?: Partial<Record<keyof Doc, number>>
+
+  /**
+   * How much the score should be boosted if the search matched fuzzily.
+   * Increasing this value generally makes the search ignore typos, but reduces performance
+   */
+  fuzzyWeight?: number
+
+  /**
+   * How much the score should be boosted if the search matched by prefix.
+   * For e.g, when searching for "hop", "hoppscotch" would match by prefix.
+   */
+  prefixWeight?: number
+}
+
+/**
+ * A base class for SpotlightSearcherServices that have a static set of documents
+ * that can optionally be toggled against (via the `excludeFromSearch` property in the Doc)
+ */
+export abstract class StaticSpotlightSearcherService<
+    Doc extends object & { excludeFromSearch?: boolean }
+  >
+  extends Service
+  implements SpotlightSearcher
+{
+  public abstract readonly searcherID: string
+  public abstract readonly searcherSectionTitle: string
+
+  private minisearch: MiniSearch
+
+  private loading = ref(false)
+
+  private _documents: Record<string, Doc> = {}
+
+  constructor(private opts: StaticSpotlightSearcherOptions<Doc>) {
+    super()
+
+    this.minisearch = new MiniSearch({
+      fields: opts.searchFields as string[],
+    })
+  }
+
+  /**
+   * Sets the documents to search against.
+   * NOTE: We generally expect this function to only be called once and we expect
+   * the documents to not change generally. You can pass a reactive object, if you want to toggle
+   * states if you want to.
+   * @param docs The documents to search against, this is an object, with the key being the document ID
+   */
+  protected setDocuments(docs: Record<string, Doc>) {
+    this._documents = docs
+
+    this.addDocsToSearchIndex()
+  }
+
+  private async addDocsToSearchIndex() {
+    this.loading.value = true
+
+    this.minisearch.removeAll()
+    this.minisearch.vacuum()
+
+    await this.minisearch.addAllAsync(
+      Object.entries(this._documents).map(([id, doc]) => ({
+        id,
+        ...doc,
+      }))
+    )
+
+    this.loading.value = false
+  }
+
+  /**
+   * Specifies how to convert a document into the Spotlight entry format
+   * @param result The search result to convert
+   */
+  protected abstract getSearcherResultForSearchResult(
+    result: SearchResult<Doc>
+  ): SpotlightSearcherResult
+
+  public createSearchSession(
+    query: Readonly<Ref<string>>
+  ): [Ref<SpotlightSearcherSessionState>, () => void] {
+    const results = ref<SpotlightSearcherResult[]>([])
+
+    const resultObj = computed<SpotlightSearcherSessionState>(() => ({
+      loading: this.loading.value,
+      results: results.value,
+    }))
+
+    const scopeHandle = effectScope()
+
+    scopeHandle.run(() => {
+      watch(
+        [query, () => this._documents],
+        ([query, docs]) => {
+          const searchResults = this.minisearch.search(query, {
+            prefix: true,
+            boost: (this.opts.fieldWeights as any) ?? {},
+            weights: {
+              fuzzy: this.opts.fuzzyWeight ?? 0.2,
+              prefix: this.opts.prefixWeight ?? 0.6,
+            },
+          })
+
+          results.value = searchResults
+            .filter(
+              (result) =>
+                this._documents[result.id].excludeFromSearch === undefined ||
+                this._documents[result.id].excludeFromSearch === false
+            )
+            .map((result) => {
+              return this.getSearcherResultForSearchResult({
+                id: result.id,
+                score: result.score,
+                doc: docs[result.id],
+              })
+            })
+        },
+        { immediate: true }
+      )
+    })
+
+    const onSessionEnd = () => {
+      scopeHandle.stop()
+    }
+
+    return [resultObj, onSessionEnd]
+  }
+
+  /**
+   * Called when a document is selected from the search results
+   * @param id The ID of the document selected
+   * @param doc The document information of the document selected
+   */
+  public abstract onDocSelected(id: string, doc: Doc): void
+
+  public onResultSelect(result: SpotlightSearcherResult): void {
+    this.onDocSelected(result.id, resolveUnref(this._documents)[result.id])
+  }
+}

packages/hoppscotch-common/src/services/spotlight/searchers/history.searcher.ts

@@ -0,0 +1,255 @@
+import { Service } from "dioc"
+import {
+  SpotlightSearcher,
+  SpotlightSearcherResult,
+  SpotlightSearcherSessionState,
+  SpotlightService,
+} from "../"
+import { Ref, computed, effectScope, markRaw, ref, watch } from "vue"
+import { getI18n } from "~/modules/i18n"
+import MiniSearch from "minisearch"
+import { graphqlHistoryStore, restHistoryStore } from "~/newstore/history"
+import { useTimeAgo } from "@vueuse/core"
+import IconHistory from "~icons/lucide/history"
+import IconTrash2 from "~icons/lucide/trash-2"
+import SpotlightRESTHistoryEntry from "~/components/app/spotlight/entry/RESTHistory.vue"
+import SpotlightGQLHistoryEntry from "~/components/app/spotlight/entry/GQLHistory.vue"
+import { capitalize } from "lodash-es"
+import { shortDateTime } from "~/helpers/utils/date"
+import { useStreamStatic } from "~/composables/stream"
+import { activeActions$, invokeAction } from "~/helpers/actions"
+import { map } from "rxjs/operators"
+import { HoppRESTDocument } from "~/helpers/rest/document"
+
+/**
+ * This searcher is responsible for searching through the history.
+ * It also provides actions to clear the history.
+ *
+ * NOTE: Initializing this service registers it as a searcher with the Spotlight Service.
+ */
+export class HistorySpotlightSearcherService
+  extends Service
+  implements SpotlightSearcher
+{
+  public static readonly ID = "HISTORY_SPOTLIGHT_SEARCHER_SERVICE"
+
+  private t = getI18n()
+
+  public searcherID = "history"
+  public searcherSectionTitle = this.t("tab.history")
+
+  private readonly spotlight = this.bind(SpotlightService)
+
+  private clearHistoryActionEnabled = useStreamStatic(
+    activeActions$.pipe(map((actions) => actions.includes("history.clear"))),
+    activeActions$.value.includes("history.clear"),
+    () => {
+      /* noop */
+    }
+  )[0]
+
+  private restHistoryEntryOpenable = useStreamStatic(
+    activeActions$.pipe(
+      map((actions) => actions.includes("rest.request.open"))
+    ),
+    activeActions$.value.includes("rest.request.open"),
+    () => {
+      /* noop */
+    }
+  )[0]
+
+  private gqlHistoryEntryOpenable = useStreamStatic(
+    activeActions$.pipe(map((actions) => actions.includes("gql.request.open"))),
+    activeActions$.value.includes("gql.request.open"),
+    () => {
+      /* noop */
+    }
+  )[0]
+
+  constructor() {
+    super()
+
+    this.spotlight.registerSearcher(this)
+  }
+
+  createSearchSession(
+    query: Readonly<Ref<string>>
+  ): [Ref<SpotlightSearcherSessionState>, () => void] {
+    const loading = ref(false)
+    const results = ref<SpotlightSearcherResult[]>([])
+
+    const minisearch = new MiniSearch({
+      fields: ["url", "title", "reltime", "date"],
+      storeFields: ["url"],
+    })
+
+    const stopWatchHandle = watch(
+      this.clearHistoryActionEnabled,
+      (enabled) => {
+        if (enabled) {
+          if (minisearch.has("clear-history")) return
+
+          minisearch.add({
+            id: "clear-history",
+            title: this.t("action.clear_history"),
+          })
+        } else {
+          if (!minisearch.has("clear-history")) return
+
+          minisearch.discard("clear-history")
+        }
+      },
+      { immediate: true }
+    )
+
+    if (this.restHistoryEntryOpenable.value) {
+      minisearch.addAll(
+        restHistoryStore.value.state
+          .filter((x) => !!x.updatedOn)
+          .map((entry, index) => {
+            const relTimeString = capitalize(
+              useTimeAgo(entry.updatedOn!, {
+                updateInterval: 0,
+              }).value
+            )
+
+            return {
+              id: `rest-${index}`,
+              url: entry.request.endpoint,
+              reltime: relTimeString,
+              date: shortDateTime(entry.updatedOn!),
+            }
+          })
+      )
+    }
+
+    if (this.gqlHistoryEntryOpenable.value) {
+      minisearch.addAll(
+        graphqlHistoryStore.value.state
+          .filter((x) => !!x.updatedOn)
+          .map((entry, index) => {
+            const relTimeString = capitalize(
+              useTimeAgo(entry.updatedOn!, {
+                updateInterval: 0,
+              }).value
+            )
+
+            return {
+              id: `gql-${index}`,
+              url: entry.request.url,
+              reltime: relTimeString,
+              date: shortDateTime(entry.updatedOn!),
+            }
+          })
+      )
+    }
+
+    const scopeHandle = effectScope()
+
+    scopeHandle.run(() => {
+      watch(
+        [query, this.clearHistoryActionEnabled],
+        ([query]) => {
+          results.value = minisearch
+            .search(query, {
+              prefix: true,
+              fuzzy: true,
+              boost: {
+                reltime: 2,
+              },
+              weights: {
+                fuzzy: 0.2,
+                prefix: 0.8,
+              },
+            })
+            .map((x) => {
+              if (x.id === "clear-history") {
+                return {
+                  id: "clear-history",
+                  icon: markRaw(IconTrash2),
+                  score: x.score,
+                  text: {
+                    type: "text",
+                    text: this.t("action.clear_history"),
+                  },
+                }
+              }
+              if (x.id.startsWith("rest-")) {
+                const entry =
+                  restHistoryStore.value.state[parseInt(x.id.split("-")[1])]
+
+                return {
+                  id: x.id,
+                  icon: markRaw(IconHistory),
+                  score: x.score,
+                  text: {
+                    type: "custom",
+                    component: markRaw(SpotlightRESTHistoryEntry),
+                    componentProps: {
+                      historyEntry: entry,
+                    },
+                  },
+                }
+              } else {
+                // Assume gql
+                const entry =
+                  graphqlHistoryStore.value.state[parseInt(x.id.split("-")[1])]
+
+                return {
+                  id: x.id,
+                  icon: markRaw(IconHistory),
+                  score: x.score,
+                  text: {
+                    type: "custom",
+                    component: markRaw(SpotlightGQLHistoryEntry),
+                    componentProps: {
+                      historyEntry: entry,
+                    },
+                  },
+                }
+              }
+            })
+        },
+        { immediate: true }
+      )
+    })
+
+    const onSessionEnd = () => {
+      scopeHandle.stop()
+      stopWatchHandle()
+      minisearch.removeAll()
+    }
+
+    const resultObj = computed<SpotlightSearcherSessionState>(() => ({
+      loading: loading.value,
+      results: results.value,
+    }))
+
+    return [resultObj, onSessionEnd]
+  }
+
+  onResultSelect(result: SpotlightSearcherResult): void {
+    if (result.id === "clear-history") {
+      invokeAction("history.clear")
+    } else if (result.id.startsWith("rest")) {
+      const req =
+        restHistoryStore.value.state[parseInt(result.id.split("-")[1])].request
+
+      invokeAction("rest.request.open", {
+        doc: <HoppRESTDocument>{
+          request: req,
+          isDirty: false,
+        },
+      })
+    } else {
+      // Assume gql
+      const req =
+        graphqlHistoryStore.value.state[parseInt(result.id.split("-")[1])]
+          .request
+
+      invokeAction("gql.request.open", {
+        request: req,
+      })
+    }
+  }
+}

packages/hoppscotch-common/src/services/spotlight/searchers/user.searcher.ts

@@ -0,0 +1,96 @@
+import { SpotlightSearcherResult, SpotlightService } from ".."
+import {
+  SearchResult,
+  StaticSpotlightSearcherService,
+} from "./base/static.searcher"
+import { getI18n } from "~/modules/i18n"
+import { Component, computed, markRaw, reactive } from "vue"
+import { useStreamStatic } from "~/composables/stream"
+import IconLogin from "~icons/lucide/log-in"
+import IconLogOut from "~icons/lucide/log-out"
+import { activeActions$, invokeAction } from "~/helpers/actions"
+
+type Doc = {
+  text: string
+  excludeFromSearch?: boolean
+  alternates: string[]
+  icon: object | Component
+}
+
+/**
+ * This searcher is responsible for providing user related actions on the spotlight results.
+ *
+ * NOTE: Initializing this service registers it as a searcher with the Spotlight Service.
+ */
+export class UserSpotlightSearcherService extends StaticSpotlightSearcherService<Doc> {
+  public static readonly ID = "USER_SPOTLIGHT_SEARCHER_SERVICE"
+
+  private t = getI18n()
+
+  public readonly searcherID = "user"
+  public searcherSectionTitle = this.t("spotlight.section.user")
+
+  private readonly spotlight = this.bind(SpotlightService)
+
+  private activeActions = useStreamStatic(activeActions$, [], () => {
+    /* noop */
+  })[0]
+
+  private hasLoginAction = computed(() =>
+    this.activeActions.value.includes("user.login")
+  )
+
+  private hasLogoutAction = computed(() =>
+    this.activeActions.value.includes("user.logout")
+  )
+
+  private documents: Record<string, Doc> = reactive({
+    login: {
+      text: this.t("auth.login"),
+      excludeFromSearch: computed(() => !this.hasLoginAction.value),
+      alternates: ["sign in", "log in"],
+      icon: markRaw(IconLogin),
+    },
+    logout: {
+      text: this.t("auth.logout"),
+      excludeFromSearch: computed(() => !this.hasLogoutAction.value),
+      alternates: ["sign out", "log out"],
+      icon: markRaw(IconLogOut),
+    },
+  })
+
+  constructor() {
+    super({
+      searchFields: ["text", "alternates"],
+      fieldWeights: {
+        text: 2,
+        alternates: 1,
+      },
+    })
+
+    this.setDocuments(this.documents)
+    this.spotlight.registerSearcher(this)
+  }
+
+  protected getSearcherResultForSearchResult(
+    result: SearchResult<Doc>
+  ): SpotlightSearcherResult {
+    return {
+      id: result.id,
+      icon: result.doc.icon,
+      text: { type: "text", text: result.doc.text },
+      score: result.score,
+    }
+  }
+
+  public onDocSelected(id: string): void {
+    switch (id) {
+      case "login":
+        invokeAction("user.login")
+        break
+      case "logout":
+        invokeAction("user.logout")
+        break
+    }
+  }
+}

packages/hoppscotch-common/vitest.config.ts

@@ -1,5 +1,8 @@
 import { defineConfig } from "vitest/config"
 import * as path from "path"
+import Icons from "unplugin-icons/vite"
+import { FileSystemIconLoader } from "unplugin-icons/loaders"
+import Vue from "@vitejs/plugin-vue"
 
 export default defineConfig({
   test: {
@@ -9,6 +12,23 @@ export default defineConfig({
   resolve: {
     alias: {
       "~": path.resolve(__dirname, "../hoppscotch-common/src"),
+      "@composables": path.resolve(
+        __dirname,
+        "../hoppscotch-common/src/composables"
+      ),
     },
   },
+  plugins: [
+    Vue(),
+    Icons({
+      compiler: "vue3",
+      customCollections: {
+        hopp: FileSystemIconLoader("../hoppscotch-common/assets/icons"),
+        auth: FileSystemIconLoader("../hoppscotch-common/assets/icons/auth"),
+        brands: FileSystemIconLoader(
+          "../hoppscotch-common/assets/icons/brands"
+        ),
+      },
+    }) as any,
+  ],
 })

packages/hoppscotch-selfhost-web/Dockerfile

@@ -6,7 +6,7 @@ WORKDIR /usr/src/app
 RUN npm i -g pnpm
 
 COPY . .
-RUN pnpm install
+RUN pnpm install --force --frozen-lockfile
 
 WORKDIR /usr/src/app/packages/hoppscotch-selfhost-web/
 RUN pnpm run build

packages/hoppscotch-selfhost-web/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@hoppscotch/selfhost-web",
   "private": true,
-  "version": "2023.4.7",
+  "version": "2023.4.8",
   "type": "module",
   "scripts": {
     "dev:vite": "vite",
     "dev:gql-codegen": "graphql-codegen --require dotenv/config --config gql-codegen.yml dotenv_config_path=\"../../.env\" --watch",
     "dev": "pnpm exec npm-run-all -p -l dev:*",
-    "build": "node --max_old_space_size=16384 ./node_modules/vite/bin/vite.js build",
+    "build": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build",
     "preview": "vite preview",
     "lint": "eslint src --ext .ts,.js,.vue --ignore-path .gitignore .",
     "lint:ts": "vue-tsc --noEmit",
@@ -66,7 +66,7 @@
     "vite-plugin-html-config": "^1.0.10",
     "vite-plugin-inspect": "^0.7.4",
     "vite-plugin-pages": "^0.26.0",
-    "vite-plugin-pages-sitemap": "^1.4.0",
+    "vite-plugin-pages-sitemap": "^1.4.5",
     "vite-plugin-pwa": "^0.13.1",
     "vite-plugin-static-copy": "^0.12.0",
     "vite-plugin-vue-layouts": "^0.7.0",

packages/hoppscotch-selfhost-web/vite.config.ts

@@ -78,16 +78,14 @@ export default defineConfig({
       routeStyle: "nuxt",
       dirs: "../hoppscotch-common/src/pages",
       importMode: "async",
-      onRoutesGenerated(routes) {
-        // HACK: See: https://github.com/jbaubree/vite-plugin-pages-sitemap/issues/173
-        return ((generateSitemap as any).default as typeof generateSitemap)({
+      onRoutesGenerated: (routes) =>
+        generateSitemap({
           routes,
           nuxtStyle: true,
           allowRobots: true,
           dest: ".sitemap-gen",
           hostname: ENV.VITE_BASE_URL,
-        })
-      },
+        }),
     }),
     StaticCopy({
       targets: [

packages/hoppscotch-sh-admin/Dockerfile

@@ -6,7 +6,7 @@ WORKDIR /usr/src/app
 RUN npm i -g pnpm
 
 COPY . .
-RUN pnpm install
+RUN pnpm install --force --frozen-lockfile
 
 WORKDIR /usr/src/app/packages/hoppscotch-sh-admin/
 RUN pnpm run build

packages/hoppscotch-sh-admin/assets/scss/styles.scss

@@ -4,6 +4,7 @@
   @apply after:backface-hidden;
   @apply selection:bg-accentDark;
   @apply selection:text-accentContrast;
+  @apply overscroll-none;
 }
 
 :root {

packages/hoppscotch-sh-admin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hoppscotch-sh-admin",
   "private": true,
-  "version": "2023.4.7",
+  "version": "2023.4.8",
   "type": "module",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",

packages/hoppscotch-ui/package.json

@@ -47,7 +47,7 @@
     "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
     "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
     "@histoire/plugin-vue": "^0.12.4",
-    "@iconify-json/lucide": "^1.1.40",
+    "@iconify-json/lucide": "^1.1.109",
     "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/lodash-es": "^4.17.6",
@@ -71,12 +71,12 @@
     "unplugin-vue-components": "^0.21.0",
     "vite": "^3.2.3",
     "vite-plugin-checker": "^0.5.1",
-    "vite-plugin-dts": "2.0.0-beta.3",
+    "vite-plugin-dts": "3.2.0",
     "vite-plugin-fonts": "^0.6.0",
     "vite-plugin-html-config": "^1.0.10",
     "vite-plugin-inspect": "^0.7.4",
     "vite-plugin-pages": "^0.26.0",
-    "vite-plugin-pages-sitemap": "^1.4.0",
+    "vite-plugin-pages-sitemap": "^1.4.5",
     "vite-plugin-pwa": "^0.13.1",
     "vite-plugin-vue-layouts": "^0.7.0",
     "vite-plugin-windicss": "^1.8.8",

packages/hoppscotch-ui/src/assets/scss/styles.scss

@@ -4,6 +4,7 @@
   @apply after:backface-hidden;
   @apply selection:bg-accentDark;
   @apply selection:text-accentContrast;
+  @apply overscroll-none;
 }
 
 :root {

packages/hoppscotch-ui/src/components/smart/Anchor.vue

@@ -1,62 +1,55 @@
 <template>
-  <HoppSmartLink :to="to" :exact="exact" :blank="blank" class="inline-flex items-center justify-center focus:outline-none"
+  <HoppSmartLink
+    :to="to"
+    :exact="exact"
+    :blank="blank"
+    class="inline-flex items-center justify-center focus:outline-none"
     :class="[
       color
         ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
         : 'hover:text-secondaryDark focus-visible:text-secondaryDark',
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
-    ]" :disabled="disabled" tabindex="0">
-    <component :is="icon" v-if="icon" class="svg-icons" :class="label ? (reverse ? 'ml-2' : 'mr-2') : ''" />
+    ]"
+    :disabled="disabled"
+    tabindex="0"
+  >
+    <component
+      :is="icon"
+      v-if="icon"
+      class="svg-icons"
+      :class="label ? (reverse ? 'ml-2' : 'mr-2') : ''"
+    />
     {{ label }}
   </HoppSmartLink>
 </template>
 
-<script lang="ts">
-import HoppSmartLink from "./Link.vue";
-import { Component, defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import HoppSmartLink from "./Link.vue"
+import type { Component } from "vue"
 
-export default defineComponent({
-  components: {
-    HoppSmartLink
-  },
-  props: {
-    to: {
-      type: String,
-      default: "",
-    },
-    exact: {
-      type: Boolean,
-      default: true,
-    },
-    blank: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-      default: "",
-    },
-    icon: {
-      type: Object as PropType<Component | null>,
-      default: null,
-    },
-    svg: {
-      type: Object as PropType<Component | null>,
-      default: null,
-    },
-    color: {
-      type: String,
-      default: "",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    reverse: {
-      type: Boolean,
-      default: false,
-    },
-  },
-})
+withDefaults(
+  defineProps<{
+    to: string
+    exact: boolean
+    blank: boolean
+    label: string
+    icon: Component | null
+    svg: Component | null
+    color: string
+    disabled: boolean
+    reverse: boolean
+  }>(),
+  {
+    to: "",
+    exact: true,
+    blank: false,
+    label: "",
+    icon: null,
+    svg: null,
+    color: "",
+    disabled: false,
+    reverse: false,
+  }
+)
 </script>