chore: modify mailer module

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

.env.example

@@ -35,9 +35,20 @@ MICROSOFT_SCOPE="user.read"
 MICROSOFT_TENANT="common"
 
 # Mailer config
-MAILER_SMTP_URL="smtps://user@domain.com:pass@smtp.domain.com"
+MAILER_SMTP_ENABLE="true"
+MAILER_USE_ADVANCE_CONFIGS="false"
 MAILER_ADDRESS_FROM='"From Name Here" <from@example.com>'
 
+MAILER_SMTP_URL="smtps://user@domain.com:pass@smtp.domain.com" # used if custom mailer configs is false
+
+# The following are used if custom mailer configs is true
+MAILER_SMTP_HOST="smtp.domain.com"
+MAILER_SMTP_PORT="587"
+MAILER_SMTP_SECURE="true"
+MAILER_SMTP_USER="user@domain.com"
+MAILER_SMTP_PASSWORD="pass"
+MAILER_TLS_REJECT_UNAUTHORIZED="true"
+
 # Rate Limit Config
 RATE_LIMIT_TTL=60 # In seconds
 RATE_LIMIT_MAX=100 # Max requests per IP

package.json

@@ -38,7 +38,7 @@
     },
     "packageExtensions": {
       "httpsnippet@3.0.1": {
-        "peerDependencies": {
+        "dependencies": {
           "ajv": "6.12.3"
         }
       }

packages/hoppscotch-backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.8.0 AS builder
+FROM node:20.12.2 AS builder
 
 WORKDIR /usr/src/app
 

packages/hoppscotch-backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoppscotch-backend",
-  "version": "2024.3.1",
+  "version": "2024.3.3",
   "description": "",
   "author": "",
   "private": true,
@@ -30,11 +30,13 @@
     "@nestjs/common": "10.2.7",
     "@nestjs/config": "3.1.1",
     "@nestjs/core": "10.2.7",
+    "@nestjs/event-emitter": "2.0.4",
     "@nestjs/graphql": "12.0.9",
     "@nestjs/jwt": "10.1.1",
     "@nestjs/passport": "10.0.2",
     "@nestjs/platform-express": "10.2.7",
     "@nestjs/schedule": "4.0.1",
+    "@nestjs/terminus": "10.2.3",
     "@nestjs/throttler": "5.0.1",
     "@prisma/client": "5.8.1",
     "argon2": "0.30.3",

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

@@ -22,6 +22,7 @@ import { ShortcodeService } from 'src/shortcode/shortcode.service';
 import { ConfigService } from '@nestjs/config';
 import { OffsetPaginationArgs } from 'src/types/input-types.args';
 import * as E from 'fp-ts/Either';
+import { EventEmitter2 } from '@nestjs/event-emitter';
 
 const mockPrisma = mockDeep<PrismaService>();
 const mockPubSub = mockDeep<PubSubService>();
@@ -34,6 +35,7 @@ const mockTeamCollectionService = mockDeep<TeamCollectionService>();
 const mockMailerService = mockDeep<MailerService>();
 const mockShortcodeService = mockDeep<ShortcodeService>();
 const mockConfigService = mockDeep<ConfigService>();
+const mockEventEmitter = mockDeep<EventEmitter2>();
 
 const adminService = new AdminService(
   mockUserService,
@@ -44,9 +46,9 @@ const adminService = new AdminService(
   mockTeamInvitationService,
   mockPubSub as any,
   mockPrisma as any,
-  mockMailerService,
   mockShortcodeService,
   mockConfigService,
+  mockEventEmitter,
 );
 
 const invitedUsers: InvitedUsers[] = [

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

@@ -19,7 +19,6 @@ import {
   USER_IS_ADMIN,
   USER_NOT_FOUND,
 } from '../errors';
-import { MailerService } from '../mailer/mailer.service';
 import { InvitedUser } from './invited-user.model';
 import { TeamService } from '../team/team.service';
 import { TeamCollectionService } from '../team-collection/team-collection.service';
@@ -31,6 +30,8 @@ import { ShortcodeService } from 'src/shortcode/shortcode.service';
 import { ConfigService } from '@nestjs/config';
 import { OffsetPaginationArgs } from 'src/types/input-types.args';
 import { UserDeletionResult } from 'src/user/user.model';
+import { EventEmitter2 } from '@nestjs/event-emitter';
+import { Events } from 'src/types/EventEmitter';
 
 @Injectable()
 export class AdminService {
@@ -43,9 +44,9 @@ export class AdminService {
     private readonly teamInvitationService: TeamInvitationService,
     private readonly pubsub: PubSubService,
     private readonly prisma: PrismaService,
-    private readonly mailerService: MailerService,
     private readonly shortcodeService: ShortcodeService,
     private readonly configService: ConfigService,
+    private readonly eventEmitter: EventEmitter2,
   ) {}
 
   /**
@@ -99,17 +100,16 @@ export class AdminService {
     });
     if (alreadyInvitedUser != null) return E.left(USER_ALREADY_INVITED);
 
-    try {
-      await this.mailerService.sendUserInvitationEmail(inviteeEmail, {
+    this.eventEmitter.emit(Events.MAILER_SEND_USER_INVITATION_EMAIL, {
+      to: inviteeEmail,
+      mailDesc: {
         template: 'user-invitation',
         variables: {
           inviteeEmail: inviteeEmail,
           magicLink: `${this.configService.get('VITE_BASE_URL')}`,
         },
-      });
-    } catch (e) {
-      return E.left(EMAIL_FAILED);
-    }
+      },
+    });
 
     // Add invitee email to the list of invited users by admin
     const dbInvitedUser = await this.prisma.invitedUsers.create({

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

@@ -292,6 +292,14 @@ export class InfraResolver {
     return this.infraConfigService.getAllowedAuthProviders();
   }
 
+  @Query(() => Boolean, {
+    description: 'Check if the SMTP is enabled or not',
+  })
+  @UseGuards(GqlAuthGuard)
+  isSMTPEnabled() {
+    return this.infraConfigService.isSMTPEnabled();
+  }
+
   /* Mutations */
 
   @Mutation(() => [InfraConfig], {
@@ -359,4 +367,23 @@ export class InfraResolver {
 
     return true;
   }
+
+  @Mutation(() => Boolean, {
+    description: 'Enable or Disable SMTP for sending emails',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  async toggleSMTP(
+    @Args({
+      name: 'status',
+      type: () => ServiceStatus,
+      description: 'Toggle SMTP',
+    })
+    status: ServiceStatus,
+  ) {
+    const isUpdated = await this.infraConfigService.enableAndDisableSMTP(
+      status,
+    );
+    if (E.isLeft(isUpdated)) throwErr(isUpdated.left);
+    return true;
+  }
 }

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

@@ -26,9 +26,12 @@ import { loadInfraConfiguration } from './infra-config/helper';
 import { MailerModule } from './mailer/mailer.module';
 import { PosthogModule } from './posthog/posthog.module';
 import { ScheduleModule } from '@nestjs/schedule';
+import { HealthModule } from './health/health.module';
+import { EventEmitterModule } from '@nestjs/event-emitter';
 
 @Module({
   imports: [
+    EventEmitterModule.forRoot(),
     ConfigModule.forRoot({
       isGlobal: true,
       load: [async () => loadInfraConfiguration()],
@@ -100,6 +103,7 @@ import { ScheduleModule } from '@nestjs/schedule';
     InfraConfigModule,
     PosthogModule,
     ScheduleModule.forRoot(),
+    HealthModule,
   ],
   providers: [GQLComplexityPlugin],
   controllers: [AppController],

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

@@ -23,6 +23,7 @@ import * as argon2 from 'argon2';
 import * as E from 'fp-ts/Either';
 import { ConfigService } from '@nestjs/config';
 import { InfraConfigService } from 'src/infra-config/infra-config.service';
+import { EventEmitter2 } from '@nestjs/event-emitter';
 
 const mockPrisma = mockDeep<PrismaService>();
 const mockUser = mockDeep<UserService>();
@@ -30,6 +31,7 @@ const mockJWT = mockDeep<JwtService>();
 const mockMailer = mockDeep<MailerService>();
 const mockConfigService = mockDeep<ConfigService>();
 const mockInfraConfigService = mockDeep<InfraConfigService>();
+const mockEventEmitter = mockDeep<EventEmitter2>();
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -37,9 +39,9 @@ const authService = new AuthService(
   mockUser,
   mockPrisma,
   mockJWT,
-  mockMailer,
   mockConfigService,
   mockInfraConfigService,
+  mockEventEmitter,
 );
 
 const currentTime = new Date();

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

@@ -1,5 +1,4 @@
 import { HttpStatus, Injectable } from '@nestjs/common';
-import { MailerService } from 'src/mailer/mailer.service';
 import { PrismaService } from 'src/prisma/prisma.service';
 import { UserService } from 'src/user/user.service';
 import { VerifyMagicDto } from './dto/verify-magic.dto';
@@ -30,6 +29,8 @@ import { VerificationToken } from '@prisma/client';
 import { Origin } from './helper';
 import { ConfigService } from '@nestjs/config';
 import { InfraConfigService } from 'src/infra-config/infra-config.service';
+import { EventEmitter2 } from '@nestjs/event-emitter';
+import { Events } from 'src/types/EventEmitter';
 
 @Injectable()
 export class AuthService {
@@ -37,9 +38,9 @@ export class AuthService {
     private usersService: UserService,
     private prismaService: PrismaService,
     private jwtService: JwtService,
-    private readonly mailerService: MailerService,
     private readonly configService: ConfigService,
     private infraConfigService: InfraConfigService,
+    private eventEmitter: EventEmitter2,
   ) {}
 
   /**
@@ -234,11 +235,14 @@ export class AuthService {
         url = this.configService.get('VITE_BASE_URL');
     }
 
-    await this.mailerService.sendEmail(email, {
-      template: 'user-invitation',
-      variables: {
-        inviteeEmail: email,
-        magicLink: `${url}/enter?token=${generatedTokens.token}`,
+    this.eventEmitter.emit(Events.MAILER_SEND_EMAIL, {
+      to: email,
+      mailDesc: {
+        template: 'user-invitation',
+        variables: {
+          inviteeEmail: email,
+          magicLink: `${url}/enter?token=${generatedTokens.token}`,
+        },
       },
     });
 

packages/hoppscotch-backend/src/errors.ts

@@ -678,6 +678,19 @@ export const MAILER_SMTP_URL_UNDEFINED = 'mailer/smtp_url_undefined' as const;
 export const MAILER_FROM_ADDRESS_UNDEFINED =
   'mailer/from_address_undefined' as const;
 
+/**
+ * MAILER_SMTP_USER environment variable is not defined
+ * (MailerModule)
+ */
+export const MAILER_SMTP_USER_UNDEFINED = 'mailer/smtp_user_undefined' as const;
+
+/**
+ * MAILER_SMTP_PASSWORD environment variable is not defined
+ * (MailerModule)
+ */
+export const MAILER_SMTP_PASSWORD_UNDEFINED =
+  'mailer/smtp_password_undefined' as const;
+
 /**
  * SharedRequest invalid request JSON format
  * (ShortcodeService)

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

@@ -0,0 +1,24 @@
+import { Controller, Get } from '@nestjs/common';
+import {
+  HealthCheck,
+  HealthCheckService,
+  PrismaHealthIndicator,
+} from '@nestjs/terminus';
+import { PrismaService } from 'src/prisma/prisma.service';
+
+@Controller('health')
+export class HealthController {
+  constructor(
+    private health: HealthCheckService,
+    private prismaHealth: PrismaHealthIndicator,
+    private prisma: PrismaService,
+  ) {}
+
+  @Get()
+  @HealthCheck()
+  check() {
+    return this.health.check([
+      async () => this.prismaHealth.pingCheck('database', this.prisma),
+    ]);
+  }
+}

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

@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { HealthController } from './health.controller';
+import { PrismaModule } from 'src/prisma/prisma.module';
+import { TerminusModule } from '@nestjs/terminus';
+
+@Module({
+  imports: [PrismaModule, TerminusModule],
+  controllers: [HealthController],
+})
+export class HealthModule {}

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

@@ -33,10 +33,17 @@ const AuthProviderConfigurations = {
     InfraConfigEnum.MICROSOFT_SCOPE,
     InfraConfigEnum.MICROSOFT_TENANT,
   ],
-  [AuthProvider.EMAIL]: [
-    InfraConfigEnum.MAILER_SMTP_URL,
-    InfraConfigEnum.MAILER_ADDRESS_FROM,
-  ],
+  [AuthProvider.EMAIL]: !!process.env.MAILER_USE_CUSTOM_CONFIGS
+    ? [
+        InfraConfigEnum.MAILER_SMTP_HOST,
+        InfraConfigEnum.MAILER_SMTP_PORT,
+        InfraConfigEnum.MAILER_SMTP_SECURE,
+        InfraConfigEnum.MAILER_SMTP_USER,
+        InfraConfigEnum.MAILER_SMTP_PASSWORD,
+        InfraConfigEnum.MAILER_TLS_REJECT_UNAUTHORIZED,
+        InfraConfigEnum.MAILER_ADDRESS_FROM,
+      ]
+    : [InfraConfigEnum.MAILER_SMTP_URL, InfraConfigEnum.MAILER_ADDRESS_FROM],
 };
 
 /**
@@ -75,6 +82,14 @@ export async function getDefaultInfraConfigs(): Promise<
 
   // Prepare rows for 'infra_config' table with default values (from .env) for each 'name'
   const infraConfigDefaultObjs: { name: InfraConfigEnum; value: string }[] = [
+    {
+      name: InfraConfigEnum.MAILER_SMTP_ENABLE,
+      value: process.env.MAILER_SMTP_ENABLE ?? 'true',
+    },
+    {
+      name: InfraConfigEnum.MAILER_USE_CUSTOM_CONFIGS,
+      value: process.env.MAILER_USE_CUSTOM_CONFIGS ?? 'false',
+    },
     {
       name: InfraConfigEnum.MAILER_SMTP_URL,
       value: process.env.MAILER_SMTP_URL,
@@ -83,6 +98,30 @@ export async function getDefaultInfraConfigs(): Promise<
       name: InfraConfigEnum.MAILER_ADDRESS_FROM,
       value: process.env.MAILER_ADDRESS_FROM,
     },
+    {
+      name: InfraConfigEnum.MAILER_SMTP_HOST,
+      value: process.env.MAILER_SMTP_HOST,
+    },
+    {
+      name: InfraConfigEnum.MAILER_SMTP_PORT,
+      value: process.env.MAILER_SMTP_PORT,
+    },
+    {
+      name: InfraConfigEnum.MAILER_SMTP_SECURE,
+      value: process.env.MAILER_SMTP_SECURE,
+    },
+    {
+      name: InfraConfigEnum.MAILER_SMTP_USER,
+      value: process.env.MAILER_SMTP_USER,
+    },
+    {
+      name: InfraConfigEnum.MAILER_SMTP_PASSWORD,
+      value: process.env.MAILER_SMTP_PASSWORD,
+    },
+    {
+      name: InfraConfigEnum.MAILER_TLS_REJECT_UNAUTHORIZED,
+      value: process.env.MAILER_TLS_REJECT_UNAUTHORIZED,
+    },
     {
       name: InfraConfigEnum.GOOGLE_CLIENT_ID,
       value: process.env.GOOGLE_CLIENT_ID,

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

@@ -43,6 +43,7 @@ export class InfraConfigService implements OnModuleInit {
     InfraConfigEnum.ALLOW_ANALYTICS_COLLECTION,
     InfraConfigEnum.ANALYTICS_USER_ID,
     InfraConfigEnum.IS_FIRST_TIME_INFRA_SETUP,
+    InfraConfigEnum.MAILER_SMTP_ENABLE,
   ];
   // Following fields can not be fetched by `infraConfigs` Query. Use dedicated queries for these fields instead.
   EXCLUDE_FROM_FETCH_CONFIGS = [
@@ -218,6 +219,47 @@ export class InfraConfigService implements OnModuleInit {
     return E.right(isUpdated.right.value === 'true');
   }
 
+  /**
+   * Enable or Disable SMTP
+   * @param status Status to enable or disable
+   * @returns Either true or an error
+   */
+  async enableAndDisableSMTP(status: ServiceStatus) {
+    const isUpdated = await this.toggleServiceStatus(
+      InfraConfigEnum.MAILER_SMTP_ENABLE,
+      status,
+      true,
+    );
+    if (E.isLeft(isUpdated)) return E.left(isUpdated.left);
+
+    if (status === ServiceStatus.DISABLE) {
+      this.enableAndDisableSSO([{ provider: AuthProvider.EMAIL, status }]);
+    }
+    return E.right(true);
+  }
+
+  /**
+   * Enable or Disable Service (i.e. ALLOW_AUDIT_LOGS, ALLOW_ANALYTICS_COLLECTION, ALLOW_DOMAIN_WHITELISTING, SITE_PROTECTION)
+   * @param configName Name of the InfraConfigEnum
+   * @param status Status to enable or disable
+   * @param restartEnabled If true, restart the app after updating the InfraConfig
+   * @returns Either true or an error
+   */
+  async toggleServiceStatus(
+    configName: InfraConfigEnum,
+    status: ServiceStatus,
+    restartEnabled = false,
+  ) {
+    const isUpdated = await this.update(
+      configName,
+      status === ServiceStatus.ENABLE ? 'true' : 'false',
+      restartEnabled,
+    );
+    if (E.isLeft(isUpdated)) return E.left(isUpdated.left);
+
+    return E.right(true);
+  }
+
   /**
    * Enable or Disable SSO for login/signup
    * @param provider Auth Provider to enable or disable
@@ -316,6 +358,16 @@ export class InfraConfigService implements OnModuleInit {
       .split(',');
   }
 
+  /**
+   * Check if SMTP is enabled or not
+   * @returns boolean
+   */
+  isSMTPEnabled() {
+    return (
+      this.configService.get<string>('INFRA.MAILER_SMTP_ENABLE') === 'true'
+    );
+  }
+
   /**
    * Reset all the InfraConfigs to their default values (from .env)
    */
@@ -363,6 +415,20 @@ export class InfraConfigService implements OnModuleInit {
   ) {
     for (let i = 0; i < infraConfigs.length; i++) {
       switch (infraConfigs[i].name) {
+        case InfraConfigEnum.MAILER_SMTP_ENABLE:
+          if (
+            infraConfigs[i].value !== 'true' &&
+            infraConfigs[i].value !== 'false'
+          )
+            return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
+        case InfraConfigEnum.MAILER_USE_CUSTOM_CONFIGS:
+          if (
+            infraConfigs[i].value !== 'true' &&
+            infraConfigs[i].value !== 'false'
+          )
+            return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
         case InfraConfigEnum.MAILER_SMTP_URL:
           const isValidUrl = validateSMTPUrl(infraConfigs[i].value);
           if (!isValidUrl) return E.left(INFRA_CONFIG_INVALID_INPUT);
@@ -371,6 +437,32 @@ export class InfraConfigService implements OnModuleInit {
           const isValidEmail = validateSMTPEmail(infraConfigs[i].value);
           if (!isValidEmail) return E.left(INFRA_CONFIG_INVALID_INPUT);
           break;
+        case InfraConfigEnum.MAILER_SMTP_HOST:
+          if (!infraConfigs[i].value) return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
+        case InfraConfigEnum.MAILER_SMTP_PORT:
+          if (!infraConfigs[i].value) return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
+        case InfraConfigEnum.MAILER_SMTP_SECURE:
+          if (
+            infraConfigs[i].value !== 'true' &&
+            infraConfigs[i].value !== 'false'
+          )
+            return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
+        case InfraConfigEnum.MAILER_SMTP_USER:
+          if (!infraConfigs[i].value) return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
+        case InfraConfigEnum.MAILER_SMTP_PASSWORD:
+          if (!infraConfigs[i].value) return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
+        case InfraConfigEnum.MAILER_TLS_REJECT_UNAUTHORIZED:
+          if (
+            infraConfigs[i].value !== 'true' &&
+            infraConfigs[i].value !== 'false'
+          )
+            return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
         case InfraConfigEnum.GOOGLE_CLIENT_ID:
           if (!infraConfigs[i].value) return E.left(INFRA_CONFIG_INVALID_INPUT);
           break;

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

@@ -0,0 +1,30 @@
+import { Injectable } from '@nestjs/common';
+import { OnEvent } from '@nestjs/event-emitter';
+import { Events } from 'src/types/EventEmitter';
+import {
+  AdminUserInvitationMailDescription,
+  MailDescription,
+  UserMagicLinkMailDescription,
+} from './MailDescriptions';
+import { MailerService } from './mailer.service';
+
+@Injectable()
+export class MailerEventListener {
+  constructor(private mailerService: MailerService) {}
+
+  @OnEvent(Events.MAILER_SEND_EMAIL, { async: true })
+  async handleSendEmailEvent(data: {
+    to: string;
+    mailDesc: MailDescription | UserMagicLinkMailDescription;
+  }) {
+    await this.mailerService.sendEmail(data.to, data.mailDesc);
+  }
+
+  @OnEvent(Events.MAILER_SEND_USER_INVITATION_EMAIL, { async: true })
+  async handleSendUserInvitationEmailEvent(data: {
+    to: string;
+    mailDesc: AdminUserInvitationMailDescription;
+  }) {
+    await this.mailerService.sendUserInvitationEmail(data.to, data.mailDesc);
+  }
+}

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

@@ -4,38 +4,43 @@ import { HandlebarsAdapter } from '@nestjs-modules/mailer/dist/adapters/handleba
 import { MailerService } from './mailer.service';
 import { throwErr } from 'src/utils';
 import {
-  MAILER_FROM_ADDRESS_UNDEFINED,
+  MAILER_SMTP_PASSWORD_UNDEFINED,
   MAILER_SMTP_URL_UNDEFINED,
+  MAILER_SMTP_USER_UNDEFINED,
 } from 'src/errors';
 import { ConfigService } from '@nestjs/config';
 import { loadInfraConfiguration } from 'src/infra-config/helper';
+import { MailerEventListener } from './mailer.listener';
+import { TransportType } from '@nestjs-modules/mailer/dist/interfaces/mailer-options.interface';
 
 @Global()
-@Module({
-  imports: [],
-  providers: [MailerService],
-  exports: [MailerService],
-})
+@Module({})
 export class MailerModule {
   static async register() {
+    const config = new ConfigService();
     const env = await loadInfraConfiguration();
 
-    let mailerSmtpUrl = env.INFRA.MAILER_SMTP_URL;
-    let mailerAddressFrom = env.INFRA.MAILER_ADDRESS_FROM;
-
-    if (!env.INFRA.MAILER_SMTP_URL || !env.INFRA.MAILER_ADDRESS_FROM) {
-      const config = new ConfigService();
-      mailerSmtpUrl = config.get('MAILER_SMTP_URL');
-      mailerAddressFrom = config.get('MAILER_ADDRESS_FROM');
+    // If mailer SMTP is DISABLED, return the module without any configuration (service, listener, etc.)
+    if (env.INFRA.MAILER_SMTP_ENABLE !== 'true') {
+      console.log('Mailer SMTP is disabled');
+      return { module: MailerModule };
     }
 
+    // If mailer is ENABLED, return the module with configuration (service, listener, etc.)
+
+    // Determine transport configuration based on custom config flag
+    let transportOption = getTransportOption(env, config);
+    // Get mailer address from environment or config
+    const mailerAddressFrom = getMailerAddressFrom(env, config);
+
     return {
       module: MailerModule,
+      providers: [MailerService, MailerEventListener],
       imports: [
         NestMailerModule.forRoot({
-          transport: mailerSmtpUrl ?? throwErr(MAILER_SMTP_URL_UNDEFINED),
+          transport: transportOption,
           defaults: {
-            from: mailerAddressFrom ?? throwErr(MAILER_FROM_ADDRESS_UNDEFINED),
+            from: mailerAddressFrom,
           },
           template: {
             dir: __dirname + '/templates',
@@ -46,3 +51,52 @@ export class MailerModule {
     };
   }
 }
+
+function isEnabled(value) {
+  return value === 'true';
+}
+function getMailerAddressFrom(env, config): string {
+  return (
+    env.INFRA.MAILER_ADDRESS_FROM ??
+    config.get('MAILER_ADDRESS_FROM') ??
+    throwErr(MAILER_SMTP_URL_UNDEFINED)
+  );
+}
+function getTransportOption(env, config): TransportType {
+  const useCustomConfigs = isEnabled(
+    env.INFRA.MAILER_USE_CUSTOM_CONFIGS ??
+      config.get('MAILER_USE_CUSTOM_CONFIGS'),
+  );
+
+  if (!useCustomConfigs) {
+    console.log('Using simple mailer configuration');
+    return (
+      env.INFRA.MAILER_SMTP_URL ??
+      config.get('MAILER_SMTP_URL') ??
+      throwErr(MAILER_SMTP_URL_UNDEFINED)
+    );
+  } else {
+    console.log('Using advanced mailer configuration');
+    return {
+      host: env.INFRA.MAILER_SMTP_HOST ?? config.get('MAILER_SMTP_HOST'),
+      port: +env.INFRA.MAILER_SMTP_PORT ?? +config.get('MAILER_SMTP_PORT'),
+      secure:
+        !!env.INFRA.MAILER_SMTP_SECURE ?? !!config.get('MAILER_SMTP_SECURE'),
+      auth: {
+        user:
+          env.INFRA.MAILER_SMTP_USER ??
+          config.get('MAILER_SMTP_USER') ??
+          throwErr(MAILER_SMTP_USER_UNDEFINED),
+        pass:
+          env.INFRA.MAILER_SMTP_PASSWORD ??
+          config.get('MAILER_SMTP_PASSWORD') ??
+          throwErr(MAILER_SMTP_PASSWORD_UNDEFINED),
+      },
+      tls: {
+        rejectUnauthorized:
+          !!env.INFRA.MAILER_TLS_REJECT_UNAUTHORIZED ??
+          !!config.get('MAILER_TLS_REJECT_UNAUTHORIZED'),
+      },
+    };
+  }
+}

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

@@ -7,10 +7,14 @@ import {
 import { throwErr } from 'src/utils';
 import { EMAIL_FAILED } from 'src/errors';
 import { MailerService as NestMailerService } from '@nestjs-modules/mailer';
+import { ConfigService } from '@nestjs/config';
 
 @Injectable()
 export class MailerService {
-  constructor(private readonly nestMailerService: NestMailerService) {}
+  constructor(
+    private readonly nestMailerService: NestMailerService,
+    private readonly configService: ConfigService,
+  ) {}
 
   /**
    * Takes an input mail description and spits out the Email subject required for it
@@ -42,6 +46,8 @@ export class MailerService {
     to: string,
     mailDesc: MailDescription | UserMagicLinkMailDescription,
   ) {
+    if (this.configService.get('INFRA.MAILER_SMTP_ENABLE') !== 'true') return;
+
     try {
       await this.nestMailerService.sendMail({
         to,
@@ -64,6 +70,8 @@ export class MailerService {
     to: string,
     mailDesc: AdminUserInvitationMailDescription,
   ) {
+    if (this.configService.get('INFRA.MAILER_SMTP_ENABLE') !== 'true') return;
+
     try {
       const res = await this.nestMailerService.sendMail({
         to,

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

@@ -15,12 +15,13 @@ import {
   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';
 import { ConfigService } from '@nestjs/config';
+import { EventEmitter2 } from '@nestjs/event-emitter';
+import { Events } from 'src/types/EventEmitter';
 
 @Injectable()
 export class TeamInvitationService {
@@ -28,9 +29,9 @@ export class TeamInvitationService {
     private readonly prisma: PrismaService,
     private readonly userService: UserService,
     private readonly teamService: TeamService,
-    private readonly mailerService: MailerService,
     private readonly pubsub: PubSubService,
     private readonly configService: ConfigService,
+    private eventEmitter: EventEmitter2,
   ) {}
 
   /**
@@ -147,14 +148,17 @@ export class TeamInvitationService {
       },
     });
 
-    await this.mailerService.sendEmail(inviteeEmail, {
-      template: 'team-invitation',
-      variables: {
-        invitee: creator.displayName ?? 'A Hoppscotch User',
-        action_url: `${this.configService.get('VITE_BASE_URL')}/join-team?id=${
-          dbInvitation.id
-        }`,
-        invite_team_name: team.name,
+    this.eventEmitter.emit(Events.MAILER_SEND_EMAIL, {
+      to: inviteeEmail,
+      mailDesc: {
+        template: 'team-invitation',
+        variables: {
+          invitee: creator.displayName ?? 'A Hoppscotch User',
+          action_url: `${this.configService.get(
+            'VITE_BASE_URL',
+          )}/join-team?id=${dbInvitation.id}`,
+          invite_team_name: team.name,
+        },
       },
     });
 

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

@@ -0,0 +1,4 @@
+export enum Events {
+  MAILER_SEND_EMAIL = 'mailer.sendEmail',
+  MAILER_SEND_USER_INVITATION_EMAIL = 'mailer.sendUserInvitationEmail',
+}

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

@@ -1,7 +1,16 @@
 export enum InfraConfigEnum {
+  MAILER_SMTP_ENABLE = 'MAILER_SMTP_ENABLE',
+  MAILER_USE_CUSTOM_CONFIGS = 'MAILER_USE_CUSTOM_CONFIGS',
   MAILER_SMTP_URL = 'MAILER_SMTP_URL',
   MAILER_ADDRESS_FROM = 'MAILER_ADDRESS_FROM',
 
+  MAILER_SMTP_HOST = 'MAILER_SMTP_HOST',
+  MAILER_SMTP_PORT = 'MAILER_SMTP_PORT',
+  MAILER_SMTP_SECURE = 'MAILER_SMTP_SECURE',
+  MAILER_SMTP_USER = 'MAILER_SMTP_USER',
+  MAILER_SMTP_PASSWORD = 'MAILER_SMTP_PASSWORD',
+  MAILER_TLS_REJECT_UNAUTHORIZED = 'MAILER_TLS_REJECT_UNAUTHORIZED',
+
   GOOGLE_CLIENT_ID = 'GOOGLE_CLIENT_ID',
   GOOGLE_CLIENT_SECRET = 'GOOGLE_CLIENT_SECRET',
   GOOGLE_CALLBACK_URL = 'GOOGLE_CALLBACK_URL',

packages/hoppscotch-common/locales/en.json

@@ -374,7 +374,8 @@
     "mutations": "Mutations",
     "schema": "Schema",
     "subscriptions": "Subscriptions",
-    "switch_connection": "Switch connection"
+    "switch_connection": "Switch connection",
+    "url_placeholder": "Enter a GraphQL endpoint URL"
   },
   "graphql_collections": {
     "title": "GraphQL Collections"
@@ -598,6 +599,7 @@
     "title": "Request",
     "type": "Request type",
     "url": "URL",
+    "url_placeholder": "Enter a URL or paste a cURL command",
     "variables": "Variables",
     "view_my_links": "View my links"
   },

packages/hoppscotch-common/locales/ru.json

@@ -11,12 +11,13 @@
     "connect": "Подключиться",
     "connecting": "Соединение...",
     "copy": "Скопировать",
-    "create": "Create",
+    "create": "Создать",
     "delete": "Удалить",
     "disconnect": "Отключиться",
     "dismiss": "Скрыть",
     "dont_save": "Не сохранять",
     "download_file": "Скачать файл",
+    "download_here": "Download here",
     "drag_to_reorder": "Перетягивайте для сортировки",
     "duplicate": "Дублировать",
     "edit": "Редактировать",
@@ -24,6 +25,7 @@
     "go_back": "Вернуться",
     "go_forward": "Вперёд",
     "group_by": "Сгруппировать по",
+    "hide_secret": "Hide secret",
     "label": "Название",
     "learn_more": "Узнать больше",
     "less": "Меньше",
@@ -33,7 +35,7 @@
     "open_workspace": "Открыть пространство",
     "paste": "Вставить",
     "prettify": "Форматировать",
-    "properties": "Properties",
+    "properties": "Параметры",
     "remove": "Удалить",
     "rename": "Переименовать",
     "restore": "Восстановить",
@@ -42,13 +44,14 @@
     "scroll_to_top": "Вверх",
     "search": "Поиск",
     "send": "Отправить",
-    "share": "Share",
+    "share": "Поделиться",
+    "show_secret": "Show secret",
     "start": "Начать",
     "starting": "Запускаю",
     "stop": "Стоп",
-    "to_close": "что бы закрыть",
+    "to_close": "закрыть",
     "to_navigate": "для навигации",
-    "to_select": "выборать",
+    "to_select": "выбрать",
     "turn_off": "Выключить",
     "turn_on": "Включить",
     "undo": "Отменить",
@@ -66,12 +69,12 @@
     "copy_interface_type": "Copy interface type",
     "copy_user_id": "Копировать токен пользователя",
     "developer_option": "Настройки разработчика",
-    "developer_option_description": "Инструмент разработчика помогает обслуживить и развивить Hoppscotch",
+    "developer_option_description": "Инструмент разработчика помогает обслуживать и развивать Hoppscotch",
     "discord": "Discord",
     "documentation": "Документация",
     "github": "GitHub",
     "help": "Справка, отзывы и документация",
-    "home": "Дом",
+    "home": "На главную",
     "invite": "Пригласить",
     "invite_description": "В Hoppscotch мы разработали простой и интуитивно понятный интерфейс для создания и управления вашими API. Hoppscotch - это инструмент, который помогает создавать, тестировать, документировать и делиться своими API.",
     "invite_your_friends": "Пригласить своих друзей",
@@ -85,7 +88,7 @@
     "reload": "Перезагрузить",
     "search": "Поиск",
     "share": "Поделиться",
-    "shortcuts": "Ярлыки",
+    "shortcuts": "Горячие клавиши",
     "social_description": "Подписывайся на наши соц. сети и оставайся всегда в курсе последних новостей, обновлений и релизов.",
     "social_links": "Социальные сети",
     "spotlight": "Прожектор",
@@ -96,17 +99,19 @@
     "type_a_command_search": "Введите команду или выполните поиск…",
     "we_use_cookies": "Мы используем куки",
     "whats_new": "Что нового?",
-    "wiki": "Вики"
+    "wiki": "Узнать больше"
   },
   "auth": {
     "account_exists": "Учетная запись существует с разными учетными данными - войдите, чтобы связать обе учетные записи",
     "all_sign_in_options": "Все варианты входа",
+    "continue_with_auth_provider": "Continue with {provider}",
     "continue_with_email": "Продолжить с электронной почтой",
     "continue_with_github": "Продолжить с GitHub",
+    "continue_with_github_enterprise": "Continue with GitHub Enterprise",
     "continue_with_google": "Продолжить с Google",
     "continue_with_microsoft": "Продолжить с Microsoft",
     "email": "Электронное письмо",
-    "logged_out": "Вышли из",
+    "logged_out": "Успешно вышли. Будем скучать!",
     "login": "Авторизоваться",
     "login_success": "Успешный вход в систему",
     "login_to_hoppscotch": "Войти в Hoppscotch",
@@ -121,7 +126,7 @@
     "generate_token": "Сгенерировать токен",
     "graphql_headers": "Authorization Headers are sent as part of the payload to connection_init",
     "include_in_url": "Добавить в URL",
-    "inherited_from": "Inherited {auth} from parent collection {collection} ",
+    "inherited_from": "Унаследован тип аутентификации {auth} из родительской коллекции {collection}",
     "learn": "Узнать больше",
     "oauth": {
       "redirect_auth_server_returned_error": "Auth Server returned an error state",
@@ -135,11 +140,32 @@
       "redirect_no_token_endpoint": "No Token Endpoint Defined",
       "something_went_wrong_on_oauth_redirect": "Something went wrong during OAuth Redirect",
       "something_went_wrong_on_token_generation": "Something went wrong on token generation",
-      "token_generation_oidc_discovery_failed": "Failure on token generation: OpenID Connect Discovery Failed"
+      "token_generation_oidc_discovery_failed": "Failure on token generation: OpenID Connect Discovery Failed",
+      "grant_type": "Grant Type",
+      "grant_type_auth_code": "Authorization Code",
+      "token_fetched_successfully": "Token fetched successfully",
+      "token_fetch_failed": "Failed to fetch token",
+      "validation_failed": "Validation Failed, please check the form fields",
+      "label_authorization_endpoint": "Authorization Endpoint",
+      "label_client_id": "Client ID",
+      "label_client_secret": "Client Secret",
+      "label_code_challenge": "Code Challenge",
+      "label_code_challenge_method": "Code Challenge Method",
+      "label_code_verifier": "Code Verifier",
+      "label_scopes": "Scopes",
+      "label_token_endpoint": "Token Endpoint",
+      "label_use_pkce": "Use PKCE",
+      "label_implicit": "Implicit",
+      "label_password": "Password",
+      "label_username": "Username",
+      "label_auth_code": "Authorization Code",
+      "label_client_credentials": "Client Credentials"
     },
+    "pass_by_headers_label": "Headers",
+    "pass_by_query_params_label": "Query Parameters",
     "pass_key_by": "Pass by",
     "password": "Пароль",
-    "save_to_inherit": "Please save this request in any collection to inherit the authorization",
+    "save_to_inherit": "Чтобы унаследовать аутентификации, нужно сохранить запрос в коллекции",
     "token": "Токен",
     "type": "Метод авторизации",
     "username": "Имя пользователя"
@@ -149,6 +175,7 @@
     "different_parent": "Нельзя сортировать коллекцию с разной родительской коллекцией",
     "edit": "Редактировать коллекцию",
     "import_or_create": "Вы можете импортировать существующую или создать новую коллекцию",
+    "import_collection": "Импортировать коллекцию",
     "invalid_name": "Укажите допустимое название коллекции",
     "invalid_root_move": "Коллекция уже в корне",
     "moved": "Перемещено успешно",
@@ -157,38 +184,36 @@
     "name_length_insufficient": "Имя коллекции должно иметь 3 или более символов",
     "new": "Создать коллекцию",
     "order_changed": "Порядок коллекции обновлён",
-    "properties": "Collection Properties",
-    "properties_updated": "Collection Properties Updated",
+    "properties": "Параметры коллекции",
+    "properties_updated": "Параметры коллекции обновлены",
     "renamed": "Коллекция переименована",
     "request_in_use": "Запрос обрабатывается",
     "save_as": "Сохранить как",
     "save_to_collection": "Сохранить в коллекцию",
     "select": "Выбрать коллекцию",
-    "select_location": "Выберите местоположение",
-    "select_team": "Выберите команду",
-    "team_collections": "Коллекции команд"
+    "select_location": "Выберите местоположение"
   },
   "confirm": {
-    "close_unsaved_tab": "Вы уверены что хотите закрыть эту вкладку?",
-    "close_unsaved_tabs": "Вы уверены что хотите закрыть все эти вкладки? Несохранённые данные {count} вкладок будут утеряны.",
+    "close_unsaved_tab": "Вы уверены, что хотите закрыть эту вкладку?",
+    "close_unsaved_tabs": "Вы уверены, что хотите закрыть все эти вкладки? Несохранённые данные {count} вкладок будут утеряны.",
     "exit_team": "Вы точно хотите покинуть эту команду?",
     "logout": "Вы действительно хотите выйти?",
     "remove_collection": "Вы уверены, что хотите навсегда удалить эту коллекцию?",
-    "remove_environment": "Вы действительно хотите удалить эту среду без возможности восстановления?",
+    "remove_environment": "Вы действительно хотите удалить это окружение без возможности восстановления?",
     "remove_folder": "Вы уверены, что хотите навсегда удалить эту папку?",
     "remove_history": "Вы уверены, что хотите навсегда удалить всю историю?",
     "remove_request": "Вы уверены, что хотите навсегда удалить этот запрос?",
-    "remove_shared_request": "Are you sure you want to permanently delete this shared request?",
+    "remove_shared_request": "Вы уверены, что хотите навсегда удалить этот запрос?",
     "remove_team": "Вы уверены, что хотите удалить эту команду?",
     "remove_telemetry": "Вы действительно хотите отказаться от телеметрии?",
-    "request_change": "Вы уверены что хотите сбросить текущий запрос, все не сохранённые данные будт утеряны?",
+    "request_change": "Вы уверены, что хотите сбросить текущий запрос, все не сохранённые данные будт утеряны?",
     "save_unsaved_tab": "Вы хотите сохранить изменения в этой вкладке?",
     "sync": "Вы уверены, что хотите синхронизировать это рабочее пространство?"
   },
   "context_menu": {
-    "add_parameters": "Add to parameters",
-    "open_request_in_new_tab": "Open request in new tab",
-    "set_environment_variable": "Set as variable"
+    "add_parameters": "Добавить в список параметров",
+    "open_request_in_new_tab": "Открыть запрос в новом окне",
+    "set_environment_variable": "Добавить значение в переменную"
   },
   "cookies": {
     "modal": {
@@ -227,24 +252,25 @@
     "collections": "Коллекции пустые",
     "documentation": "Подключите GraphQL endpoint, чтобы увидеть документацию.",
     "endpoint": "Endpoint не может быть пустым",
-    "environments": "Окружения пусты",
+    "environments": "Переменных окружения нет",
     "folder": "Папка пуста",
     "headers": "У этого запроса нет заголовков",
     "history": "История пуста",
     "invites": "Вы еще никого не приглашали",
     "members": "В этой команде еще нет участников",
-    "parameters": "Этот запрос не имеет параметров",
+    "parameters": "Этот запрос не содержит параметров",
     "pending_invites": "Пока что нет ожидающих заявок на вступление в команду",
     "profile": "Войдите, чтобы просмотреть свой профиль",
     "protocols": "Протоколы пустые",
+    "request_variables": "Этот запрос не содержит никаких переменных",
+    "secret_environments": "Секреты хранятся только на этом устройстве и не синхронизируются с сервером",
     "schema": "Подключиться к конечной точке GraphQL",
-    "shared_requests": "Shared requests are empty",
-    "shared_requests_logout": "Login to view your shared requests or create a new one",
+    "shared_requests": "Вы еще не делились запросами с другими",
+    "shared_requests_logout": "Нужно войти, чтобы делиться запросами и управлять ими",
     "subscription": "Нет подписок",
     "team_name": "Название команды пусто",
     "teams": "Команды пустые",
-    "tests": "Для этого запроса нет тестов",
-    "shortcodes": "Нет коротких ссылок"
+    "tests": "Для этого запроса нет тестов"
   },
   "environment": {
     "add_to_global": "Добавить в глобальное окружение",
@@ -252,53 +278,57 @@
     "create_new": "Создать новое окружение",
     "created": "Окружение создано",
     "deleted": "Окружение удалено",
-    "duplicated": "Environment duplicated",
+    "duplicated": "Окружение продублировано",
     "edit": "Редактировать окружение",
-    "empty_variables": "No variables",
+    "empty_variables": "Переменные еще не добавлены",
     "global": "Global",
-    "global_variables": "Global variables",
+    "global_variables": "Глобальные переменные",
     "import_or_create": "Импортировать или создать новое окружение",
     "invalid_name": "Укажите допустимое имя для окружения",
     "list": "Переменные окружения",
     "my_environments": "Мои окружения",
-    "name": "Name",
+    "name": "Имя",
     "nested_overflow": "максимальный уровень вложения переменных окружения - 10",
     "new": "Новая среда",
     "no_active_environment": "Нет активных окружений",
     "no_environment": "Нет окружения",
     "no_environment_description": "Не выбрано окружение, выберите что делать с переменными.",
-    "quick_peek": "Environment Quick Peek",
+    "quick_peek": "Быстрый просмотр переменных",
     "replace_with_variable": "Replace with variable",
     "scope": "Scope",
+    "secrets": "Секретные переменные",
+    "secret_value": "Секретное значение",
     "select": "Выберите среду",
-    "set": "Set environment",
-    "set_as_environment": "Set as environment",
+    "set": "Выбрать окружение",
+    "set_as_environment": "Поместить значение в переменную",
     "team_environments": "Окружения команды",
     "title": "Окружения",
     "updated": "Окружение обновлено",
-    "value": "Value",
-    "variable": "Variable",
+    "value": "Значение",
+    "variable": "Переменная",
+    "variables": "Переменные",
     "variable_list": "Список переменных"
   },
   "error": {
     "authproviders_load_error": "Unable to load auth providers",
     "browser_support_sse": "Похоже, в этом браузере нет поддержки событий, отправленных сервером.",
     "check_console_details": "Подробности смотрите в журнале консоли.",
-    "check_how_to_add_origin": "Инструкция как добавить origin в настройки расширения",
+    "check_how_to_add_origin": "Инструкция как это сделать",
     "curl_invalid_format": "cURL неправильно отформатирован",
     "danger_zone": "Опасная зона",
     "delete_account": "Вы являетесь владельцем этой команды:",
     "delete_account_description": "Прежде чем удалить аккаунт вам необходимо либо назначить владельцом другого пользователя, либо удалить команды в которых вы являетесь владельцем.",
+    "empty_profile_name": "Имя пользователя не может быть пустым",
     "empty_req_name": "Пустое имя запроса",
     "f12_details": "(F12 для подробностей)",
-    "gql_prettify_invalid_query": "Не удалось определить недопустимый запрос, устранить синтаксические ошибки запроса и повторить попытку.",
+    "gql_prettify_invalid_query": "Не удалось отформатировать, т.к. в запросе есть синтаксические ошибки. Устраните их и повторите попытку.",
     "incomplete_config_urls": "Не заполнены URL конфигурации",
     "incorrect_email": "Не корректный Email",
     "invalid_link": "Не корректная ссылка",
     "invalid_link_description": "Ссылка, по которой вы перешли, - недействительна, либо срок ее действия истек.",
     "invalid_embed_link": "The embed does not exist or is invalid.",
     "json_parsing_failed": "Не корректный JSON",
-    "json_prettify_invalid_body": "Не удалось определить недопустимое тело, устранить синтаксические ошибки json и повторить попытку.",
+    "json_prettify_invalid_body": "Не удалось определить формат строки, устраните синтаксические ошибки и повторите попытку.",
     "network_error": "Похоже, возникла проблема с соединением. Попробуйте еще раз.",
     "network_fail": "Не удалось отправить запрос",
     "no_collections_to_export": "Нечего экспортировать. Для начала нужно создать коллекцию.",
@@ -306,8 +336,10 @@
     "no_environments_to_export": "Нечего экспортировать. Для начала нужно создать переменные окружения.",
     "no_results_found": "Совпадения не найдены",
     "page_not_found": "Эта страница не найдена",
-    "please_install_extension": "Нужно установить специальное расширение и добавить этот домен как новый origin в настройках расширения.",
+    "please_install_extension": "Ничего страшного. Просто нужно установить специальное расширение в браузере.",
     "proxy_error": "Proxy error",
+    "reading_files": "Произошла ошибка при чтении файла или нескольких файлов",
+    "same_profile_name": "Задано имя пользователя такое же как и было",
     "script_fail": "Не удалось выполнить сценарий предварительного запроса",
     "something_went_wrong": "Что-то пошло не так",
     "test_script_fail": "Не удалось выполнить тестирование запроса"
@@ -315,13 +347,12 @@
   "export": {
     "as_json": "Экспорт как JSON",
     "create_secret_gist": "Создать секретный Gist",
-    "create_secret_gist_tooltip_text": "Export as secret Gist",
-    "failed": "Something went wrong while exporting",
-    "secret_gist_success": "Successfully exported as secret Gist",
+    "create_secret_gist_tooltip_text": "Экспортировать как секретный Gist",
+    "failed": "Произошла ошибка во время экспорта",
+    "secret_gist_success": "Успешно экспортировано как секретный Gist",
     "require_github": "Войдите через GitHub, чтобы создать секретную суть",
     "title": "Экспорт",
-    "success": "Successfully exported",
-    "gist_created": "Gist создан"
+    "success": "Успешно экспортировано"
   },
   "filter": {
     "all": "Все",
@@ -346,7 +377,7 @@
     "switch_connection": "Изменить соединение"
   },
   "graphql_collections": {
-    "title": "GraphQL Collections"
+    "title": "Коллекции GraphQL"
   },
   "group": {
     "time": "Время",
@@ -359,8 +390,8 @@
   },
   "helpers": {
     "authorization": "Заголовок авторизации будет автоматически сгенерирован при отправке запроса.",
-    "collection_properties_authorization": " This authorization will be set for every request in this collection.",
-    "collection_properties_header": "This header will be set for every request in this collection.",
+    "collection_properties_authorization": "Этот заголовок авторизации будет подставляться при каждом запросе в этой коллекции.",
+    "collection_properties_header": "Этот заголовок будет подставляться при каждом запросе в этой коллекции.",
     "generate_documentation_first": "Сначала создайте документацию",
     "network_fail": "Невозможно достичь конечной точки API. Проверьте подключение к сети и попробуйте еще раз.",
     "offline": "Кажется, вы не в сети. Данные в этой рабочей области могут быть устаревшими.",
@@ -380,10 +411,12 @@
   "import": {
     "collections": "Импортировать коллекции",
     "curl": "Импортировать из cURL",
-    "environments_from_gist": "Import From Gist",
-    "environments_from_gist_description": "Import Hoppscotch Environments From Gist",
+    "environments_from_gist": "Импортировать из Gist",
+    "environments_from_gist_description": "Импортировать переменные окружения Hoppscotch из Gist",
     "failed": "Ошибка импорта",
-    "from_file": "Import from File",
+    "file_size_limit_exceeded_warning_multiple_files": "Выбранные файлы превышают рекомендованный лимит в 10MB. Были импортированы только первые {files}",
+    "file_size_limit_exceeded_warning_single_file": "Размер выбранного в данный момент файла превышает рекомендуемый лимит в 10 МБ. Пожалуйста, выберите другой файл.",
+    "from_file": "Импортировать из одного или нескольких файлов",
     "from_gist": "Импорт из Gist",
     "from_gist_description": "Импортировать через Gist URL",
     "from_insomnia": "Импортировать с Insomnia",
@@ -398,9 +431,9 @@
     "from_postman_description": "Импортировать из коллекции Postman",
     "from_url": "Импортировать из URL",
     "gist_url": "Введите URL-адрес Gist",
-    "gql_collections_from_gist_description": "Import GraphQL Collections From Gist",
+    "gql_collections_from_gist_description": "Импортировать GraphQL коллекцию из Gist",
     "hoppscotch_environment": "Hoppscotch Environment",
-    "hoppscotch_environment_description": "Import Hoppscotch Environment JSON file",
+    "hoppscotch_environment_description": "Импортировать окружение Hoppscotch из JSON файла",
     "import_from_url_invalid_fetch": "Не удалить получить данные по этому URL",
     "import_from_url_invalid_file_format": "Ошибка при импорте коллекций",
     "import_from_url_invalid_type": "Неподдерживаемый тип. Поддерживаемые типы: 'hoppscotch', 'openapi', 'postman', 'insomnia'",
@@ -409,16 +442,19 @@
     "json_description": "Импортировать из коллекции Hoppscotch",
     "postman_environment": "Postman Environment",
     "postman_environment_description": "Import Postman Environment from a JSON file",
+    "success": "Успешно импортировано",
     "title": "Импортировать"
   },
   "inspections": {
-    "description": "Inspect possible errors",
+    "description": "Показать возможные ошибки",
     "environment": {
-      "add_environment": "Add to Environment",
-      "not_found": "Environment variable “{environment}” not found."
+      "add_environment": "Добавить переменную",
+      "add_environment_value": "Заполнить значение",
+      "empty_value": "Значение переменной окружения '{variable}' пустое",
+      "not_found": "Переменная окружения “{environment}” не задана."
     },
     "header": {
-      "cookie": "The browser doesn't allow Hoppscotch to set the Cookie Header. While we're working on the Hoppscotch Desktop App (coming soon), please use the Authorization Header instead."
+      "cookie": "Из-за ограничений безопасности в веб версии нельзя задать Cookie параметры. Пожалуйста, используйте Hoppscotch Desktop приложение или используйте заголовок Authorization вместо этого."
     },
     "response": {
       "401_error": "Please check your authentication credentials.",
@@ -427,12 +463,12 @@
       "default_error": "Please check your request.",
       "network_error": "Please check your network connection."
     },
-    "title": "Inspector",
+    "title": "Помощник",
     "url": {
-      "extension_not_installed": "Extension not installed.",
-      "extension_unknown_origin": "Make sure you've added the API endpoint's origin to the Hoppscotch Browser Extension list.",
-      "extention_enable_action": "Enable Browser Extension",
-      "extention_not_enabled": "Extension not enabled."
+      "extension_not_installed": "Расширение не установлено.",
+      "extension_unknown_origin": "Убедитесь, что текущий домен добавлен в список доверенных ресурсов в расширении браузера",
+      "extention_enable_action": "Подключить расширение",
+      "extention_not_enabled": "Расширение в браузере не подключено."
     }
   },
   "layout": {
@@ -445,11 +481,11 @@
   "modal": {
     "close_unsaved_tab": "У вас есть не сохранённые изменения",
     "collections": "Коллекции",
-    "confirm": "Подтверждать",
+    "confirm": "Подтвердите действие",
     "customize_request": "Customize Request",
     "edit_request": "Изменить запрос",
     "import_export": "Импорт Экспорт",
-    "share_request": "Share Request"
+    "share_request": "Поделиться запросом"
   },
   "mqtt": {
     "already_subscribed": "Вы уже подписаны на этот топик",
@@ -485,7 +521,7 @@
     "doc": "Документы",
     "graphql": "GraphQL",
     "profile": "Профиль",
-    "realtime": "В реальном времени",
+    "realtime": "Realtime",
     "rest": "REST",
     "settings": "Настройки"
   },
@@ -507,8 +543,8 @@
     "roles": "Роли",
     "roles_description": "Роли позволяют настраивать доступ конкретным людям к публичным коллекциям.",
     "updated": "Профиль обновлен",
-    "viewer": "Зритель",
-    "viewer_description": "Зрительно могут только просматривать и использовать запросы."
+    "viewer": "Читатель",
+    "viewer_description": "Могут только просматривать и использовать запросы."
   },
   "remove": {
     "star": "Удалить звезду"
@@ -530,11 +566,11 @@
     "enter_curl": "Введите сюда команду cURL",
     "generate_code": "Сгенерировать код",
     "generated_code": "Сгенерированный код",
-    "go_to_authorization_tab": "Go to Authorization",
-    "go_to_body_tab": "Go to Body tab",
+    "go_to_authorization_tab": "Перейти на вкладку авторизации",
+    "go_to_body_tab": "Перейти на вкладку тела запроса",
     "header_list": "Список заголовков",
     "invalid_name": "Укажите имя для запроса",
-    "method": "Методика",
+    "method": "Метод",
     "moved": "Запрос перемещён",
     "name": "Имя запроса",
     "new": "Новый запрос",
@@ -548,22 +584,22 @@
     "payload": "Полезная нагрузка",
     "query": "Запрос",
     "raw_body": "Необработанное тело запроса",
-    "rename": "Переименость запрос",
+    "rename": "Переименовать запрос",
     "renamed": "Запрос переименован",
+    "request_variables": "Переменные запроса",
     "run": "Запустить",
     "save": "Сохранить",
     "save_as": "Сохранить как",
     "saved": "Запрос сохранен",
-    "share": "Делиться",
+    "share": "Поделиться",
     "share_description": "Поделиться Hoppscotch с друзьями",
-    "share_request": "Share Request",
-    "stop": "Stop",
+    "share_request": "Поделиться запросом",
+    "stop": "Стоп",
     "title": "Запрос",
     "type": "Тип запроса",
     "url": "URL",
     "variables": "Переменные",
-    "view_my_links": "Посмотреть мои ссылки",
-    "copy_link": "Копировать ссылку"
+    "view_my_links": "Посмотреть мои ссылки"
   },
   "response": {
     "audio": "Аудио",
@@ -586,7 +622,7 @@
   },
   "settings": {
     "accent_color": "Основной цвет",
-    "account": "Счет",
+    "account": "Аккаунт",
     "account_deleted": "Ваш аккаунт был удалён",
     "account_description": "Настройте параметры своей учетной записи.",
     "account_email_description": "Ваш основной адрес электронной почты.",
@@ -639,29 +675,29 @@
     "verify_email": "Подтвердить Email"
   },
   "shared_requests": {
-    "button": "Button",
-    "button_info": "Create a 'Run in Hoppscotch' button for your website, blog or a README.",
-    "copy_html": "Copy HTML",
-    "copy_link": "Copy Link",
-    "copy_markdown": "Copy Markdown",
-    "creating_widget": "Creating widget",
-    "customize": "Customize",
-    "deleted": "Shared request deleted",
-    "description": "Select a widget, you can change and customize this later",
-    "embed": "Embed",
-    "embed_info": "Add a mini 'Hoppscotch API Playground' to your website, blog or documentation.",
-    "link": "Link",
-    "link_info": "Create a shareable link to share with anyone on the internet with view access.",
-    "modified": "Shared request modified",
-    "not_found": "Shared request not found",
-    "open_new_tab": "Open in new tab",
+    "button": "Кнопка",
+    "button_info": "Создать кнопку 'Run in Hoppscotch' на свой сайт, блог или README.",
+    "copy_html": "Копировать HTML код",
+    "copy_link": "Копировать ссылку",
+    "copy_markdown": "Копировать Markdown",
+    "creating_widget": "Создание виджет",
+    "customize": "Настроить",
+    "deleted": "Запрос удален",
+    "description": "Выберите вид как вы поделитесь запросом, позже вы сможете дополнительно его настроить",
+    "embed": "Встраиваемое окно",
+    "embed_info": "Добавьте небольшую площадку 'Hoppscotch API Playground' на свой веб-сайт, блог или документацию.",
+    "link": "Ссылка",
+    "link_info": "Создайте общедоступную ссылку, которой можно поделиться с любым пользователем, имеющим доступ к просмотру.",
+    "modified": "Запрос изменен",
+    "not_found": "Такой ссылке не нашлось",
+    "open_new_tab": "Открыть в новом окне",
     "preview": "Preview",
     "run_in_hoppscotch": "Run in Hoppscotch",
     "theme": {
-      "dark": "Dark",
-      "light": "Light",
-      "system": "System",
-      "title": "Theme"
+      "dark": "Темная",
+      "light": "Светлая",
+      "system": "Системная",
+      "title": "Тема"
     }
   },
   "shortcut": {
@@ -669,7 +705,7 @@
       "close_current_menu": "Закрыть текущее меню",
       "command_menu": "Меню поиска и команд",
       "help_menu": "Меню помощи",
-      "show_all": "Горячие клавиши",
+      "show_all": "Список горячих клавиш",
       "title": "Общий"
     },
     "miscellaneous": {
@@ -696,20 +732,19 @@
       "get_method": "Выберите метод GET",
       "head_method": "Выберите метод HEAD",
       "import_curl": "Импортировать из cURL",
-      "method": "Методика",
+      "method": "Метод",
       "next_method": "Выберите следующий метод",
       "post_method": "Выберите метод POST",
       "previous_method": "Выбрать предыдущий метод",
       "put_method": "Выберите метод PUT",
       "rename": "Переименовать запрос",
       "reset_request": "Сбросить запрос",
-      "save_request": "Сохарнить запрос",
+      "save_request": "Сохранить запрос",
       "save_to_collections": "Сохранить в коллекции",
       "send_request": "Послать запрос",
-      "share_request": "Share Request",
-      "show_code": "Generate code snippet",
-      "title": "Запрос",
-      "copy_request_link": "Копировать ссылку на запрос"
+      "share_request": "Поделиться запросом",
+      "show_code": "Сгенерировать фрагмент кода из запроса",
+      "title": "Запрос"
     },
     "response": {
       "copy": "Копировать запрос в буфер обмена",
@@ -717,11 +752,11 @@
       "title": "Запрос"
     },
     "theme": {
-      "black": "Черный режим",
-      "dark": "Тёмный режим",
-      "light": "Светлый режим",
-      "system": "Определяется системой",
-      "title": "Тема"
+      "black": "Переключить на черный режим",
+      "dark": "Переключить на тёмный режим",
+      "light": "Переключить на светлый режим",
+      "system": "Переключить на тему, исходя из настроек системы",
+      "title": "Внешний вид"
     }
   },
   "show": {
@@ -730,6 +765,11 @@
     "more": "Показать больше",
     "sidebar": "Показать боковую панель"
   },
+  "site_protection": {
+    "error_fetching_site_protection_status": "Something Went Wrong While Fetching Site Protection Status",
+    "login_to_continue": "Login to continue",
+    "login_to_continue_description": "You need to be logged in to access this Hoppscotch Enterprise Instance."
+  },
   "socketio": {
     "communication": "Коммуникация",
     "connection_not_authorized": "Это SocketIO соединение не использует какую-либо авторизацию.",
@@ -739,82 +779,89 @@
     "url": "URL"
   },
   "spotlight": {
-    "change_language": "Change Language",
+    "change_language": "Изменить язык",
     "environments": {
-      "delete": "Delete current environment",
-      "duplicate": "Duplicate current environment",
-      "duplicate_global": "Duplicate global environment",
-      "edit": "Edit current environment",
-      "edit_global": "Edit global environment",
-      "new": "Create new environment",
-      "new_variable": "Create a new environment variable",
-      "title": "Environments"
+      "delete": "Удалить текущее окружение",
+      "duplicate": "Дублировать текущее окружение",
+      "duplicate_global": "Дублировать глобальное окружение",
+      "edit": "Редактировать текущее окружение",
+      "edit_global": "Редактировать глобальное окружение",
+      "new": "Создать новое окружение",
+      "new_variable": "Создать новую переменную окружения",
+      "title": "Окружение"
     },
     "general": {
-      "chat": "Chat with support",
-      "help_menu": "Help and support",
-      "open_docs": "Read Documentation",
-      "open_github": "Open GitHub repository",
-      "open_keybindings": "Keyboard shortcuts",
-      "social": "Social",
-      "title": "General"
+      "chat": "Чат с поддержкой",
+      "help_menu": "Помощь",
+      "open_docs": "Почитать документацию",
+      "open_github": "Открыть GitHub репозиторий",
+      "open_keybindings": "Горячие клавиши",
+      "social": "Соц. сети",
+      "title": "Общее"
     },
     "graphql": {
-      "connect": "Connect to server",
-      "disconnect": "Disconnect from server"
+      "connect": "Подключиться к серверу",
+      "disconnect": "Отключиться от сервера"
     },
     "miscellaneous": {
-      "invite": "Invite your friends to Hoppscotch",
-      "title": "Miscellaneous"
+      "invite": "Пригласить друзей в Hoppscotch",
+      "title": "Другое"
+    },
+    "phrases": {
+      "create_environment": "Создать окружение",
+      "create_workspace": "Создать пространство",
+      "import_collections": "Импортировать коллекцию",
+      "share_request": "Поделиться запросом",
+      "try": "Попробовать"
     },
     "request": {
-      "save_as_new": "Save as new request",
-      "select_method": "Select method",
-      "switch_to": "Switch to",
-      "tab_authorization": "Authorization tab",
-      "tab_body": "Body tab",
-      "tab_headers": "Headers tab",
-      "tab_parameters": "Parameters tab",
-      "tab_pre_request_script": "Pre-request script tab",
-      "tab_query": "Query tab",
-      "tab_tests": "Tests tab",
-      "tab_variables": "Variables tab"
+      "save_as_new": "Сохранить как новый запрос",
+      "select_method": "Выбрать метод",
+      "switch_to": "Переключиться",
+      "tab_authorization": "На вкладку авторизации",
+      "tab_body": "На вкладку тела запроса",
+      "tab_headers": "На вкладку заголовков",
+      "tab_parameters": "На вкладку параметров",
+      "tab_pre_request_script": "На вкладку пред-скрипта запроса",
+      "tab_query": "На вкладку запроса",
+      "tab_tests": "На вкладку тестов",
+      "tab_variables": "На вкладку переменных запроса"
     },
     "response": {
-      "copy": "Copy response",
-      "download": "Download response as file",
-      "title": "Response"
+      "copy": "Копировать содержимое ответа",
+      "download": "Сказать содержимое ответа как файл",
+      "title": "Ответ запроса"
     },
     "section": {
-      "interceptor": "Interceptor",
-      "interface": "Interface",
-      "theme": "Theme",
-      "user": "User"
+      "interceptor": "Перехватчик",
+      "interface": "Интерфейс",
+      "theme": "Внешний вид",
+      "user": "Пользователь"
     },
     "settings": {
-      "change_interceptor": "Change Interceptor",
-      "change_language": "Change Language",
+      "change_interceptor": "Изменить перехватчик",
+      "change_language": "Изменить язык",
       "theme": {
-        "black": "Black",
-        "dark": "Dark",
-        "light": "Light",
-        "system": "System preference"
+        "black": "Черная",
+        "dark": "Темная",
+        "light": "Светлая",
+        "system": "Как задано в системе"
       }
     },
     "tab": {
-      "close_current": "Close current tab",
-      "close_others": "Close all other tabs",
-      "duplicate": "Duplicate current tab",
-      "new_tab": "Open a new tab",
-      "title": "Tabs"
+      "close_current": "Закрыть текущую вкладку",
+      "close_others": "Закрыть все вкладки",
+      "duplicate": "Продублировать текущую вкладку",
+      "new_tab": "Открыть в новой вкладке",
+      "title": "Вкладки"
     },
     "workspace": {
-      "delete": "Delete current team",
-      "edit": "Edit current team",
-      "invite": "Invite people to team",
-      "new": "Create new team",
-      "switch_to_personal": "Switch to your personal workspace",
-      "title": "Teams"
+      "delete": "Удалить текущую команду",
+      "edit": "Редактировать текущую команду",
+      "invite": "Пригласить людей в команду",
+      "new": "Создать новую команду",
+      "switch_to_personal": "Переключить на персональное пространство",
+      "title": "Команды"
     }
   },
   "sse": {
@@ -824,7 +871,7 @@
   },
   "state": {
     "bulk_mode": "Множественное редактирование",
-    "bulk_mode_placeholder": "Каждый параметр должен начинаться с новой строки\nКлючи и значения разедляются двоеточием\nИспользуйте # для комментария",
+    "bulk_mode_placeholder": "Каждый параметр должен начинаться с новой строки\nКлючи и значения разделяются двоеточием\nИспользуйте # для комментария",
     "cleared": "Очищено",
     "connected": "Связаны",
     "connected_to": "Подключено к {name}",
@@ -843,20 +890,20 @@
     "download_failed": "Download failed",
     "download_started": "Скачивание началось",
     "enabled": "Включено",
-    "file_imported": "Файл импортирован",
+    "file_imported": "Файл  успешно импортирован",
     "finished_in": "Завершено через {duration} мс",
-    "hide": "Hide",
+    "hide": "Скрыть",
     "history_deleted": "История удалена",
     "linewrap": "Обернуть линии",
     "loading": "Загрузка...",
     "message_received": "Сообщение: {message} получено по топику: {topic}",
     "mqtt_subscription_failed": "Что-то пошло не так, при попытке подписаться на топик: {topic}",
-    "none": "Никто",
+    "none": "Не задан",
     "nothing_found": "Ничего не найдено для",
     "published_error": "Что-то пошло не так при попытке опубликовать сообщение в топик {topic}: {message}",
     "published_message": "Опубликовано сообщение: {message} в топик: {topic}",
     "reconnection_error": "Не удалось переподключиться",
-    "show": "Show",
+    "show": "Показать",
     "subscribed_failed": "Не удалось подписаться на топик: {topic}",
     "subscribed_success": "Успешно подписался на топик: {topic}",
     "unsubscribed_failed": "Не удалось отписаться от топика: {topic}",
@@ -871,7 +918,6 @@
     "forum": "Задавайте вопросы и получайте ответы",
     "github": "Подпишитесь на нас на Github",
     "shortcuts": "Просматривайте приложение быстрее",
-    "team": "Свяжитесь с командой",
     "title": "Служба поддержки",
     "twitter": "Следуйте за нами на Twitter"
   },
@@ -882,7 +928,7 @@
     "close_others": "Закрыть остальные вкладки",
     "collections": "Коллекции",
     "documentation": "Документация",
-    "duplicate": "Duplicate Tab",
+    "duplicate": "Дублировать вкладку",
     "environments": "Окружения",
     "headers": "Заголовки",
     "history": "История",
@@ -892,7 +938,8 @@
     "queries": "Запросы",
     "query": "Запрос",
     "schema": "Схема",
-    "shared_requests": "Shared Requests",
+    "shared_requests": "Запросы в общем доступе",
+    "share_tab_request": "Поделиться запросом",
     "socketio": "Socket.IO",
     "sse": "SSE",
     "tests": "Тесты",
@@ -921,7 +968,6 @@
     "invite_tooltip": "Пригласить людей в Ваше рабочее пространство",
     "invited_to_team": "{owner} приглашает Вас присоединиться к команде {team}",
     "join": "Приглашение принято",
-    "join_beta": "Присоединяйтесь к бета-программе, чтобы получить доступ к командам.",
     "join_team": "Присоединиться к {team}",
     "joined_team": "Вы присоединились к команде {team}",
     "joined_team_description": "Теперь Вы участник этой команды",
@@ -950,6 +996,7 @@
     "permissions": "Разрешения",
     "same_target_destination": "Таже цель и конечная точка",
     "saved": "Команда сохранена",
+    "search_title": "Team Requests",
     "select_a_team": "Выбрать команду",
     "success_invites": "Принятые приглашения",
     "title": "Команды",
@@ -981,16 +1028,8 @@
   "workspace": {
     "change": "Изменить пространство",
     "personal": "Моё пространство",
+    "other_workspaces": "Пространства",
     "team": "Пространство команды",
     "title": "Рабочие пространства"
-  },
-  "shortcodes": {
-    "actions": "Действия",
-    "created_on": "Создано",
-    "deleted": "Удалёна",
-    "method": "Метод",
-    "not_found": "Короткая ссылка не найдена",
-    "short_code": "Короткая ссылка",
-    "url": "URL"
   }
 }

packages/hoppscotch-common/locales/tr.json

@@ -68,9 +68,9 @@
     "developer_option": "Developer options",
     "developer_option_description": "Developer tools which helps in development and maintenance of Hoppscotch.",
     "discord": "Discord",
-    "documentation": "Dökümanlar",
+    "documentation": "Dokümanlar",
     "github": "GitHub",
-    "help": "Yardım, geri bildirim ve dökümanlar",
+    "help": "Yardım, geri bildirim ve dokümanlar",
     "home": "Ana sayfa",
     "invite": "Davet et",
     "invite_description": "Hoppscotch'ta API'lerinizi oluşturmak ve yönetmek için basit ve sezgisel bir arayüz tasarladık. Hoppscotch, API'lerinizi oluşturmanıza, test etmenize, belgelemenize ve paylaşmanıza yardımcı olan bir araçtır.",
@@ -225,7 +225,7 @@
     "body": "Bu isteğin bir gövdesi yok",
     "collection": "Koleksiyon boş",
     "collections": "Koleksiyonlar boş",
-    "documentation": "Dökümanları görmek için GraphQL uç noktasını bağlayın",
+    "documentation": "Dokümanları görmek için GraphQL uç noktasını bağlayın",
     "endpoint": "Uç nokta boş olamaz",
     "environments": "Ortamlar boş",
     "folder": "Klasör boş",
@@ -735,7 +735,7 @@
     "url": "Bağlantı"
   },
   "spotlight": {
-    "change_language": "Change Language",
+    "change_language": "Dil Değiştir",
     "environments": {
       "delete": "Delete current environment",
       "duplicate": "Duplicate current environment",
@@ -744,7 +744,7 @@
       "edit_global": "Edit global environment",
       "new": "Create new environment",
       "new_variable": "Create a new environment variable",
-      "title": "Environments"
+      "title": "Ortamlar"
     },
     "general": {
       "chat": "Chat with support",

packages/hoppscotch-common/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/common",
   "private": true,
-  "version": "2024.3.1",
+  "version": "2024.3.3",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
     "test": "vitest --run",
@@ -50,7 +50,7 @@
     "axios": "1.6.2",
     "buffer": "6.0.3",
     "cookie-es": "1.0.0",
-    "dioc": "1.0.1",
+    "dioc": "3.0.1",
     "esprima": "4.0.1",
     "events": "3.3.0",
     "fp-ts": "2.16.1",

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

@@ -32,6 +32,7 @@ declare module 'vue' {
     AppSpotlightEntryRESTHistory: typeof import('./components/app/spotlight/entry/RESTHistory.vue')['default']
     AppSpotlightEntryRESTRequest: typeof import('./components/app/spotlight/entry/RESTRequest.vue')['default']
     AppSpotlightEntryRESTTeamRequestEntry: typeof import('./components/app/spotlight/entry/RESTTeamRequestEntry.vue')['default']
+    AppSpotlightSearch: typeof import('./components/app/SpotlightSearch.vue')['default']
     AppSupport: typeof import('./components/app/Support.vue')['default']
     Collections: typeof import('./components/collections/index.vue')['default']
     CollectionsAdd: typeof import('./components/collections/Add.vue')['default']

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

@@ -43,12 +43,19 @@
             @click="invokeAction('modals.support.toggle')"
           />
         </div>
-        <div class="flex">
+        <div
+          class="flex"
+          :class="{
+            'flex-row-reverse gap-2':
+              workspaceSelectorFlagEnabled && !currentUser,
+          }"
+        >
           <div
             v-if="currentUser === null"
             class="inline-flex items-center space-x-2"
           >
             <HoppButtonSecondary
+              v-if="!workspaceSelectorFlagEnabled"
               :icon="IconUploadCloud"
               :label="t('header.save_workspace')"
               class="!focus-visible:text-emerald-600 !hover:text-emerald-600 hidden h-8 border border-emerald-600/25 bg-emerald-500/10 !text-emerald-500 hover:border-emerald-600/20 hover:bg-emerald-600/20 focus-visible:border-emerald-600/20 focus-visible:bg-emerald-600/20 md:flex"
@@ -60,18 +67,22 @@
               @click="invokeAction('modals.login.toggle')"
             />
           </div>
-          <div v-else class="inline-flex items-center space-x-2">
-            <TeamsMemberStack
-              v-if="
-                workspace.type === 'team' &&
-                selectedTeam &&
-                selectedTeam.teamMembers.length > 1
-              "
-              :team-members="selectedTeam.teamMembers"
-              show-count
-              class="mx-2"
-              @handle-click="handleTeamEdit()"
-            />
+          <TeamsMemberStack
+            v-else-if="
+              currentUser !== null &&
+              workspace.type === 'team' &&
+              selectedTeam &&
+              selectedTeam.teamMembers.length > 1
+            "
+            :team-members="selectedTeam.teamMembers"
+            show-count
+            class="mx-2"
+            @handle-click="handleTeamEdit()"
+          />
+          <div
+            v-if="workspaceSelectorFlagEnabled || currentUser"
+            class="inline-flex items-center space-x-2"
+          >
             <div
               class="flex h-8 divide-x divide-emerald-600/25 rounded border border-emerald-600/25 bg-emerald-500/10 focus-within:divide-emerald-600/20 focus-within:border-emerald-600/20 focus-within:bg-emerald-600/20 hover:divide-emerald-600/20 hover:border-emerald-600/20 hover:bg-emerald-600/20"
             >
@@ -84,6 +95,7 @@
               />
               <HoppButtonSecondary
                 v-if="
+                  currentUser &&
                   workspace.type === 'team' &&
                   selectedTeam &&
                   selectedTeam?.myRole === 'OWNER'
@@ -124,7 +136,7 @@
                 </div>
               </template>
             </tippy>
-            <span class="px-2">
+            <span v-if="currentUser" class="px-2">
               <tippy
                 interactive
                 trigger="click"
@@ -259,6 +271,13 @@ import {
 const t = useI18n()
 const toast = useToast()
 
+/**
+ * Feature flag to enable the workspace selector login conversion
+ */
+const workspaceSelectorFlagEnabled = computed(
+  () => !!platform.platformFeatureFlags.workspaceSwitcherLogin?.value
+)
+
 /**
  * Once the PWA code is initialized, this holds a method
  * that can be called to show the user the installation
@@ -380,6 +399,8 @@ const inviteTeam = (team: { name: string }, teamID: string) => {
 
 // Show the workspace selected team invite modal if the user is an owner of the team else show the default invite modal
 const handleInvite = () => {
+  if (!currentUser.value) return invokeAction("modals.login.toggle")
+
   if (
     workspace.value.type === "team" &&
     workspace.value.teamID &&

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

@@ -32,7 +32,6 @@ import { useI18n } from "~/composables/i18n"
 import { useToast } from "~/composables/toast"
 import { appendRESTCollections, restCollections$ } from "~/newstore/collections"
 import MyCollectionImport from "~/components/importExport/ImportExportSteps/MyCollectionImport.vue"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 
 import IconFolderPlus from "~icons/lucide/folder-plus"
 import IconOpenAPI from "~icons/lucide/file"
@@ -55,16 +54,15 @@ import { teamCollectionsExporter } from "~/helpers/import-export/export/teamColl
 
 import { GistSource } from "~/helpers/import-export/import/import-sources/GistSource"
 import { ImporterOrExporter } from "~/components/importExport/types"
+import { TeamWorkspace } from "~/services/workspace.service"
 
 const t = useI18n()
 const toast = useToast()
 
-type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
-
 type CollectionType =
   | {
       type: "team-collections"
-      selectedTeam: SelectedTeam
+      selectedTeam: TeamWorkspace
     }
   | { type: "my-collections" }
 
@@ -433,7 +431,7 @@ const HoppTeamCollectionsExporter: ImporterOrExporter = {
       props.collectionsType.selectedTeam
     ) {
       const res = await teamCollectionsExporter(
-        props.collectionsType.selectedTeam.id
+        props.collectionsType.selectedTeam.teamID
       )
 
       if (E.isRight(res)) {
@@ -569,8 +567,8 @@ const hasTeamWriteAccess = computed(() => {
   }
 
   return (
-    collectionsType.selectedTeam.myRole === "EDITOR" ||
-    collectionsType.selectedTeam.myRole === "OWNER"
+    collectionsType.selectedTeam.role === "EDITOR" ||
+    collectionsType.selectedTeam.role === "OWNER"
   )
 })
 
@@ -578,17 +576,17 @@ const selectedTeamID = computed(() => {
   const { collectionsType } = props
 
   return collectionsType.type === "team-collections"
-    ? collectionsType.selectedTeam?.id
+    ? collectionsType.selectedTeam?.teamID
     : undefined
 })
 
 const getCollectionJSON = async () => {
   if (
     props.collectionsType.type === "team-collections" &&
-    props.collectionsType.selectedTeam?.id
+    props.collectionsType.selectedTeam?.teamID
   ) {
     const res = await getTeamCollectionJSON(
-      props.collectionsType.selectedTeam?.id
+      props.collectionsType.selectedTeam?.teamID
     )
 
     return E.isRight(res)

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

@@ -56,23 +56,25 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, reactive, ref, watch } from "vue"
-import { cloneDeep } from "lodash-es"
+import { useI18n } from "@composables/i18n"
+import { useToast } from "@composables/toast"
 import {
   HoppGQLRequest,
   HoppRESTRequest,
   isHoppRESTRequest,
 } from "@hoppscotch/data"
-import { pipe } from "fp-ts/function"
+import { computedWithControl } from "@vueuse/core"
+import { useService } from "dioc/vue"
 import * as TE from "fp-ts/TaskEither"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import { pipe } from "fp-ts/function"
+import { cloneDeep } from "lodash-es"
+import { computed, nextTick, reactive, ref, watch } from "vue"
+import { GQLError } from "~/helpers/backend/GQLClient"
 import {
   createRequestInCollection,
   updateTeamRequest,
 } from "~/helpers/backend/mutations/TeamRequest"
 import { Picked } from "~/helpers/types/HoppPicked"
-import { useI18n } from "@composables/i18n"
-import { useToast } from "@composables/toast"
 import {
   cascadeParentCollectionForHeaderAuth,
   editGraphqlRequest,
@@ -80,12 +82,10 @@ import {
   saveGraphqlRequestAs,
   saveRESTRequestAs,
 } from "~/newstore/collections"
-import { GQLError } from "~/helpers/backend/GQLClient"
-import { computedWithControl } from "@vueuse/core"
 import { platform } from "~/platform"
-import { useService } from "dioc/vue"
-import { RESTTabService } from "~/services/tab/rest"
 import { GQLTabService } from "~/services/tab/graphql"
+import { RESTTabService } from "~/services/tab/rest"
+import { TeamWorkspace } from "~/services/workspace.service"
 
 const t = useI18n()
 const toast = useToast()
@@ -93,12 +93,10 @@ const toast = useToast()
 const RESTTabs = useService(RESTTabService)
 const GQLTabs = useService(GQLTabService)
 
-type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
-
 type CollectionType =
   | {
       type: "team-collections"
-      selectedTeam: SelectedTeam
+      selectedTeam: TeamWorkspace
     }
   | { type: "my-collections"; selectedTeam: undefined }
 
@@ -192,7 +190,7 @@ watch(
   }
 )
 
-const updateTeam = (newTeam: SelectedTeam) => {
+const updateTeam = (newTeam: TeamWorkspace) => {
   collectionsType.value.selectedTeam = newTeam
 }
 
@@ -493,7 +491,7 @@ const updateTeamCollectionOrFolder = (
   const data = {
     title: requestUpdated.name,
     request: JSON.stringify(requestUpdated),
-    teamID: collectionsType.value.selectedTeam.id,
+    teamID: collectionsType.value.selectedTeam.teamID,
   }
   pipe(
     createRequestInCollection(collectionID, data),

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

@@ -387,7 +387,6 @@ import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import IconImport from "~icons/lucide/folder-down"
 import { computed, PropType, Ref, toRef } from "vue"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { TeamCollection } from "~/helpers/teams/TeamCollection"
@@ -400,17 +399,16 @@ import * as O from "fp-ts/Option"
 import { Picked } from "~/helpers/types/HoppPicked.js"
 import { RESTTabService } from "~/services/tab/rest"
 import { useService } from "dioc/vue"
+import { TeamWorkspace } from "~/services/workspace.service"
 
 const t = useI18n()
 const colorMode = useColorMode()
 const tabs = useService(RESTTabService)
 
-type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
-
 type CollectionType =
   | {
       type: "team-collections"
-      selectedTeam: SelectedTeam
+      selectedTeam: TeamWorkspace
     }
   | { type: "my-collections"; selectedTeam: undefined }
 
@@ -614,7 +612,7 @@ const hasNoTeamAccess = computed(
   () =>
     props.collectionsType.type === "team-collections" &&
     (props.collectionsType.selectedTeam === undefined ||
-      props.collectionsType.selectedTeam.myRole === "VIEWER")
+      props.collectionsType.selectedTeam.role === "VIEWER")
 )
 
 const isSelected = ({

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

@@ -200,7 +200,7 @@ const toast = useToast()
 defineProps<{
   // Whether to activate the ability to pick items (activates 'select' events)
   saveRequest: boolean
-  picked: Picked
+  picked: Picked | null
 }>()
 
 const collections = useReadonlyStream(graphqlCollections$, [], "deep")

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

@@ -178,7 +178,6 @@ import { useI18n } from "@composables/i18n"
 import { Picked } from "~/helpers/types/HoppPicked"
 import { useReadonlyStream } from "~/composables/stream"
 import { useLocalState } from "~/newstore/localstate"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
 import {
@@ -245,7 +244,7 @@ import {
 } from "~/helpers/collection/collection"
 import { currentReorderingStatus$ } from "~/newstore/reordering"
 import { defineActionHandler, invokeAction } from "~/helpers/actions"
-import { WorkspaceService } from "~/services/workspace.service"
+import { TeamWorkspace, WorkspaceService } from "~/services/workspace.service"
 import { useService } from "dioc/vue"
 import { RESTTabService } from "~/services/tab/rest"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
@@ -274,16 +273,14 @@ const props = defineProps({
 
 const emit = defineEmits<{
   (event: "select", payload: Picked | null): void
-  (event: "update-team", team: SelectedTeam): void
+  (event: "update-team", team: TeamWorkspace): void
   (event: "update-collection-type", type: CollectionType["type"]): void
 }>()
 
-type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
-
 type CollectionType =
   | {
       type: "team-collections"
-      selectedTeam: SelectedTeam
+      selectedTeam: TeamWorkspace
     }
   | { type: "my-collections"; selectedTeam: undefined }
 
@@ -330,9 +327,7 @@ const requestMoveLoading = ref<string[]>([])
 // TeamList-Adapter
 const workspaceService = useService(WorkspaceService)
 const teamListAdapter = workspaceService.acquireTeamListAdapter(null)
-const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
 const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
-const teamListFetched = ref(false)
 
 // Team Collection Adapter
 const teamCollectionAdapter = new TeamCollectionAdapter(null)
@@ -378,7 +373,7 @@ watch(
   filterTexts,
   (newFilterText) => {
     if (collectionsType.value.type === "team-collections") {
-      const selectedTeamID = collectionsType.value.selectedTeam?.id
+      const selectedTeamID = collectionsType.value.selectedTeam?.teamID
 
       selectedTeamID &&
         debouncedSearch(newFilterText, selectedTeamID)?.catch(() => {})
@@ -435,28 +430,6 @@ onMounted(() => {
   }
 })
 
-watch(
-  () => myTeams.value,
-  (newTeams) => {
-    if (newTeams && !teamListFetched.value) {
-      teamListFetched.value = true
-      if (REMEMBERED_TEAM_ID.value && currentUser.value) {
-        const team = newTeams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
-        if (team) updateSelectedTeam(team)
-      }
-    }
-  }
-)
-
-watch(
-  () => collectionsType.value.selectedTeam,
-  (newTeam) => {
-    if (newTeam) {
-      teamCollectionAdapter.changeTeamID(newTeam.id)
-    }
-  }
-)
-
 const switchToMyCollections = () => {
   collectionsType.value.type = "my-collections"
   collectionsType.value.selectedTeam = undefined
@@ -488,11 +461,12 @@ const expandTeamCollection = (collectionID: string) => {
   teamCollectionAdapter.expandCollection(collectionID)
 }
 
-const updateSelectedTeam = (team: SelectedTeam) => {
+const updateSelectedTeam = (team: TeamWorkspace) => {
   if (team) {
     collectionsType.value.type = "team-collections"
+    teamCollectionAdapter.changeTeamID(team.teamID)
     collectionsType.value.selectedTeam = team
-    REMEMBERED_TEAM_ID.value = team.id
+    REMEMBERED_TEAM_ID.value = team.teamID
     emit("update-team", team)
     emit("update-collection-type", "team-collections")
   }
@@ -501,23 +475,14 @@ const updateSelectedTeam = (team: SelectedTeam) => {
 const workspace = workspaceService.currentWorkspace
 
 // Used to switch collection type and team when user switch workspace in the global workspace switcher
-// Check if there is a teamID in the workspace, if yes, switch to team collections and select the team
-// If there is no teamID, switch to my collections
 watch(
-  () => {
-    const space = workspace.value
-    return space.type === "personal" ? undefined : space.teamID
-  },
-  (teamID) => {
-    if (teamID) {
-      const team = myTeams.value?.find((t) => t.id === teamID)
-      if (team) {
-        updateSelectedTeam(team)
-      }
-      return
+  workspace,
+  (newWorkspace) => {
+    if (newWorkspace.type === "personal") {
+      switchToMyCollections()
+    } else if (newWorkspace.type === "team") {
+      updateSelectedTeam(newWorkspace)
     }
-
-    return switchToMyCollections()
   },
   {
     immediate: true,
@@ -545,7 +510,7 @@ const hasTeamWriteAccess = computed(() => {
     return false
   }
 
-  const role = collectionsType.value.selectedTeam?.myRole
+  const role = collectionsType.value.selectedTeam?.role
   return role === "OWNER" || role === "EDITOR"
 })
 
@@ -760,7 +725,7 @@ const addNewRootCollection = (name: string) => {
     })
 
     pipe(
-      createNewRootCollection(name, collectionsType.value.selectedTeam.id),
+      createNewRootCollection(name, collectionsType.value.selectedTeam.teamID),
       TE.match(
         (err: GQLError<string>) => {
           toast.error(`${getErrorMessage(err)}`)
@@ -831,7 +796,7 @@ const onAddRequest = (requestName: string) => {
 
     const data = {
       request: JSON.stringify(newRequest),
-      teamID: collectionsType.value.selectedTeam.id,
+      teamID: collectionsType.value.selectedTeam.teamID,
       title: requestName,
     }
 
@@ -1158,7 +1123,7 @@ const duplicateRequest = (payload: {
 
     const data = {
       request: JSON.stringify(newRequest),
-      teamID: collectionsType.value.selectedTeam.id,
+      teamID: collectionsType.value.selectedTeam.teamID,
       title: `${request.name} - ${t("action.duplicate")}`,
     }
 

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

@@ -364,6 +364,7 @@ const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
     teamID: team.id,
     teamName: team.name,
     type: "team",
+    role: team.myRole,
   })
 }
 watch(

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

@@ -46,41 +46,38 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue"
-import { isEqual } from "lodash-es"
-import { platform } from "~/platform"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { useReadonlyStream, useStream } from "@composables/stream"
+import { Environment } from "@hoppscotch/data"
+import { useService } from "dioc/vue"
+import * as TE from "fp-ts/TaskEither"
+import { pipe } from "fp-ts/function"
+import { isEqual } from "lodash-es"
+import { computed, ref, watch } from "vue"
 import { useI18n } from "~/composables/i18n"
+import { useToast } from "~/composables/toast"
+import { defineActionHandler } from "~/helpers/actions"
+import { GQLError } from "~/helpers/backend/GQLClient"
+import { deleteTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
+import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import {
+  deleteEnvironment,
   getSelectedEnvironmentIndex,
   globalEnv$,
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
-import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
-import { defineActionHandler } from "~/helpers/actions"
 import { useLocalState } from "~/newstore/localstate"
-import { pipe } from "fp-ts/function"
-import * as TE from "fp-ts/TaskEither"
-import { GQLError } from "~/helpers/backend/GQLClient"
-import { deleteEnvironment } from "~/newstore/environments"
-import { deleteTeamEnvironment } from "~/helpers/backend/mutations/TeamEnvironment"
-import { useToast } from "~/composables/toast"
-import { WorkspaceService } from "~/services/workspace.service"
-import { useService } from "dioc/vue"
-import { Environment } from "@hoppscotch/data"
+import { platform } from "~/platform"
+import { TeamWorkspace, WorkspaceService } from "~/services/workspace.service"
 
 const t = useI18n()
 const toast = useToast()
 
 type EnvironmentType = "my-environments" | "team-environments"
 
-type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
-
 type EnvironmentsChooseType = {
   type: EnvironmentType
-  selectedTeam: SelectedTeam
+  selectedTeam: TeamWorkspace | undefined
 }
 
 const environmentType = ref<EnvironmentsChooseType>({
@@ -102,11 +99,7 @@ const currentUser = useReadonlyStream(
   platform.auth.getCurrentUser()
 )
 
-// TeamList-Adapter
 const workspaceService = useService(WorkspaceService)
-const teamListAdapter = workspaceService.acquireTeamListAdapter(null)
-const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
-const teamListFetched = ref(false)
 const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
 
 const adapter = new TeamEnvironmentAdapter(undefined)
@@ -118,29 +111,17 @@ const loading = computed(
   () => adapterLoading.value && teamEnvironmentList.value.length === 0
 )
 
-watch(
-  () => myTeams.value,
-  (newTeams) => {
-    if (newTeams && !teamListFetched.value) {
-      teamListFetched.value = true
-      if (REMEMBERED_TEAM_ID.value && currentUser.value) {
-        const team = newTeams.find((t) => t.id === REMEMBERED_TEAM_ID.value)
-        if (team) updateSelectedTeam(team)
-      }
-    }
-  }
-)
-
 const switchToMyEnvironments = () => {
   environmentType.value.selectedTeam = undefined
   updateEnvironmentType("my-environments")
   adapter.changeTeamID(undefined)
 }
 
-const updateSelectedTeam = (newSelectedTeam: SelectedTeam | undefined) => {
+const updateSelectedTeam = (newSelectedTeam: TeamWorkspace | undefined) => {
   if (newSelectedTeam) {
+    adapter.changeTeamID(newSelectedTeam.teamID)
     environmentType.value.selectedTeam = newSelectedTeam
-    REMEMBERED_TEAM_ID.value = newSelectedTeam.id
+    REMEMBERED_TEAM_ID.value = newSelectedTeam.teamID
     updateEnvironmentType("team-environments")
   }
 }
@@ -148,15 +129,6 @@ const updateEnvironmentType = (newEnvironmentType: EnvironmentType) => {
   environmentType.value.type = newEnvironmentType
 }
 
-watch(
-  () => environmentType.value.selectedTeam,
-  (newTeam) => {
-    if (newTeam) {
-      adapter.changeTeamID(newTeam.id)
-    }
-  }
-)
-
 const workspace = workspaceService.currentWorkspace
 
 // Switch to my environments if workspace is personal and to team environments if workspace is team
@@ -170,8 +142,7 @@ watch(workspace, (newWorkspace) => {
       })
     }
   } else if (newWorkspace.type === "team") {
-    const team = myTeams.value?.find((t) => t.id === newWorkspace.teamID)
-    updateSelectedTeam(team)
+    updateSelectedTeam(newWorkspace)
   }
 })
 

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

@@ -54,9 +54,7 @@
               :key="tab.id"
               :label="tab.label"
             >
-              <div
-                class="divide-y divide-dividerLight rounded border border-divider"
-              >
+              <div class="divide-y divide-dividerLight">
                 <HoppSmartPlaceholder
                   v-if="tab.variables.length === 0"
                   :src="`/images/states/${colorMode.value}/blockchain.svg`"

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

@@ -56,9 +56,7 @@
               :key="tab.id"
               :label="tab.label"
             >
-              <div
-                class="divide-y divide-dividerLight rounded border border-divider"
-              >
+              <div class="divide-y divide-dividerLight">
                 <HoppSmartPlaceholder
                   v-if="tab.variables.length === 0"
                   :src="`/images/states/${colorMode.value}/blockchain.svg`"

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

@@ -4,7 +4,7 @@
       class="sticky top-upperPrimaryStickyFold z-10 flex flex-1 flex-shrink-0 justify-between overflow-x-auto border-b border-dividerLight bg-primary"
     >
       <HoppButtonSecondary
-        v-if="team === undefined || team.myRole === 'VIEWER'"
+        v-if="team === undefined || team.role === 'VIEWER'"
         v-tippy="{ theme: 'tooltip' }"
         disabled
         class="!rounded-none"
@@ -28,7 +28,7 @@
           :icon="IconHelpCircle"
         />
         <HoppButtonSecondary
-          v-if="team !== undefined && team.myRole === 'VIEWER'"
+          v-if="team !== undefined && team.role === 'VIEWER'"
           v-tippy="{ theme: 'tooltip' }"
           disabled
           :icon="IconImport"
@@ -84,7 +84,7 @@
         )"
         :key="`environment-${index}`"
         :environment="environment"
-        :is-viewer="team?.myRole === 'VIEWER'"
+        :is-viewer="team?.role === 'VIEWER'"
         @edit-environment="editEnvironment(environment)"
       />
     </div>
@@ -103,16 +103,16 @@
       :show="showModalDetails"
       :action="action"
       :editing-environment="editingEnvironment"
-      :editing-team-id="team?.id"
+      :editing-team-id="team?.teamID"
       :editing-variable-name="editingVariableName"
       :is-secret-option-selected="secretOptionSelected"
-      :is-viewer="team?.myRole === 'VIEWER'"
+      :is-viewer="team?.role === 'VIEWER'"
       @hide-modal="displayModalEdit(false)"
     />
     <EnvironmentsImportExport
       v-if="showModalImportExport"
       :team-environments="teamEnvironments"
-      :team-id="team?.id"
+      :team-id="team?.teamID"
       environment-type="TEAM_ENV"
       @hide-modal="displayModalImportExport(false)"
     />
@@ -129,16 +129,14 @@ import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import IconImport from "~icons/lucide/folder-down"
 import { defineActionHandler } from "~/helpers/actions"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import { TeamWorkspace } from "~/services/workspace.service"
 
 const t = useI18n()
 
 const colorMode = useColorMode()
 
-type SelectedTeam = GetMyTeamsQuery["myTeams"][number] | undefined
-
 const props = defineProps<{
-  team: SelectedTeam
+  team: TeamWorkspace | undefined
   teamEnvironments: TeamEnvironment[]
   adapterError: GQLError<string> | null
   loading: boolean
@@ -151,7 +149,7 @@ const editingEnvironment = ref<TeamEnvironment | null>(null)
 const editingVariableName = ref("")
 const secretOptionSelected = ref(false)
 
-const isTeamViewer = computed(() => props.team?.myRole === "VIEWER")
+const isTeamViewer = computed(() => props.team?.role === "VIEWER")
 
 const displayModalAdd = (shouldDisplay: boolean) => {
   action.value = "new"

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

@@ -10,7 +10,7 @@
         autocomplete="off"
         spellcheck="false"
         class="w-full rounded border border-divider bg-primaryLight px-4 py-2 text-secondaryDark"
-        :placeholder="`${t('request.url')}`"
+        :placeholder="`${t('graphql.url_placeholder')}`"
         :disabled="connected"
         @keyup.enter="onConnectClick"
       />

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

@@ -54,7 +54,7 @@
       >
         <SmartEnvInput
           v-model="tab.document.request.endpoint"
-          :placeholder="`${t('request.url')}`"
+          :placeholder="`${t('request.url_placeholder')}`"
           :auto-complete-source="userHistories"
           :auto-complete-env="true"
           :inspection-results="tabResults"

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

@@ -37,13 +37,17 @@ import { TeamNameCodec } from "~/helpers/backend/types/TeamName"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { platform } from "~/platform"
+import { useService } from "dioc/vue"
+import { WorkspaceService } from "~/services/workspace.service"
+import { useLocalState } from "~/newstore/localstate"
 
 const t = useI18n()
 
 const toast = useToast()
 
-defineProps<{
+const props = defineProps<{
   show: boolean
+  switchWorkspaceAfterCreation?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -52,8 +56,12 @@ const emit = defineEmits<{
 
 const editingName = ref<string | null>(null)
 
+const REMEMBERED_TEAM_ID = useLocalState("REMEMBERED_TEAM_ID")
+
 const isLoading = ref(false)
 
+const workspaceService = useService(WorkspaceService)
+
 const addNewTeam = async () => {
   isLoading.value = true
   await pipe(
@@ -76,8 +84,19 @@ const addNewTeam = async () => {
           // Handle GQL errors (use err obj)
         }
       },
-      () => {
+      (team) => {
         toast.success(`${t("team.new_created")}`)
+
+        if (props.switchWorkspaceAfterCreation) {
+          REMEMBERED_TEAM_ID.value = team.id
+          workspaceService.changeWorkspace({
+            teamID: team.id,
+            teamName: team.name,
+            type: "team",
+            role: team.myRole,
+          })
+        }
+
         hideModal()
       }
     )

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

@@ -59,14 +59,18 @@
         />
       </div>
       <div
-        v-if="!loading && teamListAdapterError"
+        v-else-if="teamListAdapterError"
         class="flex flex-col items-center py-4"
       >
         <icon-lucide-help-circle class="svg-icons mb-4" />
         {{ t("error.something_went_wrong") }}
       </div>
     </div>
-    <TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
+    <TeamsAdd
+      :show="showModalAdd"
+      :switch-workspace-after-creation="true"
+      @hide-modal="displayModalAdd(false)"
+    />
   </div>
 </template>
 <script setup lang="ts">
@@ -81,7 +85,7 @@ import { useColorMode } from "@composables/theming"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import IconDone from "~icons/lucide/check"
 import { useLocalState } from "~/newstore/localstate"
-import { defineActionHandler } from "~/helpers/actions"
+import { defineActionHandler, invokeAction } from "~/helpers/actions"
 import { WorkspaceService } from "~/services/workspace.service"
 import { useService } from "dioc/vue"
 import { useElementVisibility, useIntervalFn } from "@vueuse/core"
@@ -154,6 +158,7 @@ const switchToTeamWorkspace = (team: GetMyTeamsQuery["myTeams"][number]) => {
     teamID: team.id,
     teamName: team.name,
     type: "team",
+    role: team.myRole,
   })
 }
 
@@ -169,11 +174,14 @@ watch(
   (user) => {
     if (!user) {
       switchToPersonalWorkspace()
+      teamListadapter.dispose()
     }
   }
 )
 
 const displayModalAdd = (shouldDisplay: boolean) => {
+  if (!currentUser.value) return invokeAction("modals.login.toggle")
+
   showModalAdd.value = shouldDisplay
   teamListadapter.fetchList()
 }

packages/hoppscotch-common/src/helpers/teams/TeamListAdapter.ts

@@ -50,6 +50,7 @@ export default class TeamListAdapter {
   }
 
   public dispose() {
+    this.teamList$.next([])
     this.isDispose = true
     clearTimeout(this.timeoutHandle as any)
     this.timeoutHandle = null

packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts

@@ -201,7 +201,7 @@ export class TeamSearchService extends Service {
   expandingCollections: Ref<string[]> = ref([])
   expandedCollections: Ref<string[]> = ref([])
 
-  // FUTURE-TODO: ideally this should return the search results / formatted results instead of directly manipulating the result set
+  // TODO: ideally this should return the search results / formatted results instead of directly manipulating the result set
   // eg: do the spotlight formatting in the spotlight searcher and not here
   searchTeams = async (query: string, teamID: string) => {
     if (!query.length) {

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

@@ -1,5 +1,5 @@
 import { HoppModule } from "."
-import { Container, Service } from "dioc"
+import { Container, ServiceClassInstance } from "dioc"
 import { diocPlugin } from "dioc/vue"
 import { DebugService } from "~/services/debug.service"
 import { platform } from "~/platform"
@@ -22,7 +22,7 @@ if (import.meta.env.DEV) {
  * 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 }>(
+export function getService<T extends ServiceClassInstance<any>>(
   service: T
 ): InstanceType<T> {
   return serviceContainer.bind(service)
@@ -30,11 +30,10 @@ export function getService<T extends typeof Service<any> & { ID: string }>(
 
 export default <HoppModule>{
   onVueAppInit(app) {
-    // TODO: look into this
-    // @ts-expect-error Something weird with Vue versions
     app.use(diocPlugin, {
       container: serviceContainer,
     })
+
     for (const service of platform.addedServices ?? []) {
       serviceContainer.bind(service)
     }

packages/hoppscotch-common/src/newstore/settings.ts

@@ -1,9 +1,10 @@
-import { pluck, distinctUntilChanged } from "rxjs/operators"
 import { cloneDeep, defaultsDeep, has } from "lodash-es"
 import { Observable } from "rxjs"
-
-import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
+import { distinctUntilChanged, pluck } from "rxjs/operators"
+import { nextTick } from "vue"
+import { platform } from "~/platform"
 import type { KeysMatching } from "~/types/ts-utils"
+import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
 
 export const HoppBgColors = ["system", "light", "dark", "black"] as const
 
@@ -69,51 +70,63 @@ export type SettingsDef = {
   HAS_OPENED_SPOTLIGHT: boolean
 }
 
-export const getDefaultSettings = (): SettingsDef => ({
-  syncCollections: true,
-  syncHistory: true,
-  syncEnvironments: true,
+export const getDefaultSettings = (): SettingsDef => {
+  const defaultSettings: SettingsDef = {
+    syncCollections: true,
+    syncHistory: true,
+    syncEnvironments: true,
 
-  WRAP_LINES: {
-    httpRequestBody: true,
-    httpResponseBody: true,
-    httpHeaders: true,
-    httpParams: true,
-    httpUrlEncoded: true,
-    httpPreRequest: true,
-    httpTest: true,
-    httpRequestVariables: true,
-    graphqlQuery: true,
-    graphqlResponseBody: true,
-    graphqlHeaders: false,
-    graphqlVariables: false,
-    graphqlSchema: true,
-    importCurl: true,
-    codeGen: true,
-    cookie: true,
-  },
+    WRAP_LINES: {
+      httpRequestBody: true,
+      httpResponseBody: true,
+      httpHeaders: true,
+      httpParams: true,
+      httpUrlEncoded: true,
+      httpPreRequest: true,
+      httpTest: true,
+      httpRequestVariables: true,
+      graphqlQuery: true,
+      graphqlResponseBody: true,
+      graphqlHeaders: false,
+      graphqlVariables: false,
+      graphqlSchema: true,
+      importCurl: true,
+      codeGen: true,
+      cookie: true,
+    },
 
-  CURRENT_INTERCEPTOR_ID: "browser", // TODO: Allow the platform definition to take this place
+    CURRENT_INTERCEPTOR_ID: "",
 
-  // TODO: Interceptor related settings should move under the interceptor systems
-  PROXY_URL: "https://proxy.hoppscotch.io/",
-  URL_EXCLUDES: {
-    auth: true,
-    httpUser: true,
-    httpPassword: true,
-    bearerToken: true,
-    oauth2Token: true,
-  },
-  THEME_COLOR: "indigo",
-  BG_COLOR: "system",
-  TELEMETRY_ENABLED: true,
-  EXPAND_NAVIGATION: false,
-  SIDEBAR: true,
-  SIDEBAR_ON_LEFT: false,
-  COLUMN_LAYOUT: true,
+    // TODO: Interceptor related settings should move under the interceptor systems
+    PROXY_URL: "https://proxy.hoppscotch.io/",
+    URL_EXCLUDES: {
+      auth: true,
+      httpUser: true,
+      httpPassword: true,
+      bearerToken: true,
+      oauth2Token: true,
+    },
+    THEME_COLOR: "indigo",
+    BG_COLOR: "system",
+    TELEMETRY_ENABLED: true,
+    EXPAND_NAVIGATION: false,
+    SIDEBAR: true,
+    SIDEBAR_ON_LEFT: false,
+    COLUMN_LAYOUT: true,
 
-  HAS_OPENED_SPOTLIGHT: false,
-})
+    HAS_OPENED_SPOTLIGHT: false,
+  }
+
+  // Wait for platform to initialize before setting CURRENT_INTERCEPTOR_ID
+  nextTick(() => {
+    applySetting(
+      "CURRENT_INTERCEPTOR_ID",
+      platform?.interceptors.default || "browser"
+    )
+  })
+
+  return defaultSettings
+}
 
 type ApplySettingPayload = {
   [K in keyof SettingsDef]: {

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

@@ -64,13 +64,6 @@
       @submit="renameReqName"
       @hide-modal="showRenamingReqNameModal = false"
     />
-    <HoppSmartConfirmModal
-      :show="confirmingCloseForTabID !== null"
-      :confirm="t('modal.close_unsaved_tab')"
-      :title="t('confirm.save_unsaved_tab')"
-      @hide-modal="onCloseConfirmSaveTab"
-      @resolve="onResolveConfirmSaveTab"
-    />
     <HoppSmartConfirmModal
       :show="confirmingCloseAllTabs"
       :confirm="t('modal.close_unsaved_tab')"
@@ -78,6 +71,36 @@
       @hide-modal="confirmingCloseAllTabs = false"
       @resolve="onResolveConfirmCloseAllTabs"
     />
+    <HoppSmartModal
+      v-if="confirmingCloseForTabID !== null"
+      dialog
+      role="dialog"
+      aria-modal="true"
+      :title="t('modal.close_unsaved_tab')"
+      @close="confirmingCloseForTabID = null"
+    >
+      <template #body>
+        <div class="text-center">
+          {{ t("confirm.save_unsaved_tab") }}
+        </div>
+      </template>
+      <template #footer>
+        <span class="flex space-x-2">
+          <HoppButtonPrimary
+            v-focus
+            :label="t?.('action.yes')"
+            outline
+            @click="onResolveConfirmSaveTab"
+          />
+          <HoppButtonSecondary
+            :label="t?.('action.no')"
+            filled
+            outline
+            @click="onCloseConfirmSaveTab"
+          />
+        </span>
+      </template>
+    </HoppSmartModal>
     <CollectionsSaveRequest
       v-if="savingRequest"
       mode="rest"

packages/hoppscotch-common/src/platform/index.ts

@@ -8,14 +8,15 @@ import { AnalyticsPlatformDef } from "./analytics"
 import { InterceptorsPlatformDef } from "./interceptors"
 import { HoppModule } from "~/modules"
 import { InspectorsPlatformDef } from "./inspectors"
-import { Service } from "dioc"
+import { ServiceClassInstance } from "dioc"
 import { IOPlatformDef } from "./io"
 import { SpotlightPlatformDef } from "./spotlight"
+import { Ref } from "vue"
 
 export type PlatformDef = {
   ui?: UIPlatformDef
   addedHoppModules?: HoppModule[]
-  addedServices?: Array<typeof Service<unknown> & { ID: string }>
+  addedServices?: Array<ServiceClassInstance<unknown>>
   auth: AuthPlatformDef
   analytics?: AnalyticsPlatformDef
   io: IOPlatformDef
@@ -45,6 +46,11 @@ export type PlatformDef = {
      * If a value is not given, then the value is assumed to be true
      */
     promptAsUsingCookies?: boolean
+
+    /**
+     * Whether to show the A/B testing workspace switcher click login flow or not
+     */
+    workspaceSwitcherLogin?: Ref<boolean>
   }
 }
 

packages/hoppscotch-common/src/platform/inspectors.ts

@@ -1,4 +1,4 @@
-import { Service } from "dioc"
+import { Container, ServiceClassInstance } from "dioc"
 import { Inspector } from "~/services/inspection"
 
 /**
@@ -8,8 +8,9 @@ export type PlatformInspectorsDef = {
   // We are keeping this as the only mode for now
   // So that if we choose to add other modes, we can do without breaking
   type: "service"
-  service: typeof Service<unknown> & { ID: string } & {
-    new (): Service & Inspector
+  // TODO: I don't think this type is effective, we have to come up with a better impl
+  service: ServiceClassInstance<unknown> & {
+    new (c: Container): Inspector
   }
 }
 

packages/hoppscotch-common/src/platform/interceptors.ts

@@ -1,12 +1,13 @@
-import { Service } from "dioc"
+import { Container, ServiceClassInstance } from "dioc"
 import { Interceptor } from "~/services/interceptor.service"
 
 export type PlatformInterceptorDef =
   | { type: "standalone"; interceptor: Interceptor }
   | {
       type: "service"
-      service: typeof Service<unknown> & { ID: string } & {
-        new (): Service & Interceptor
+      // TODO: I don't think this type is effective, we have to come up with a better impl
+      service: ServiceClassInstance<unknown> & {
+        new (c: Container): Interceptor
       }
     }
 

packages/hoppscotch-common/src/platform/spotlight.ts

@@ -1,10 +1,10 @@
-import { Service } from "dioc"
+import { Container, ServiceClassInstance } from "dioc"
 import { SpotlightSearcher } from "~/services/spotlight"
 
 export type SpotlightPlatformDef = {
   additionalSearchers?: Array<
-    typeof Service<unknown> & { ID: string } & {
-      new (): Service & SpotlightSearcher
+    ServiceClassInstance<unknown> & {
+      new (c: Container): SpotlightSearcher
     }
   >
 }

packages/hoppscotch-common/src/platform/std/inspections/extension.inspector.ts

@@ -31,9 +31,7 @@ export class ExtensionInspectorService extends Service implements Inspector {
 
   private readonly inspection = this.bind(InspectionService)
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.inspection.registerInspector(this)
   }
 

packages/hoppscotch-common/src/platform/std/interceptors/extension.ts

@@ -133,9 +133,7 @@ export class ExtensionInterceptorService
 
   public selectable = { type: "selectable" as const }
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.listenForExtensionStatus()
   }
 

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

@@ -24,9 +24,7 @@ export class EnvironmentMenuService extends Service implements ContextMenu {
 
   private readonly contextMenu = this.bind(ContextMenuService)
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.contextMenu.registerMenu(this)
   }
 

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

@@ -41,9 +41,7 @@ export class ParameterMenuService extends Service implements ContextMenu {
 
   private readonly contextMenu = this.bind(ContextMenuService)
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.contextMenu.registerMenu(this)
   }
 

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

@@ -39,9 +39,7 @@ export class URLMenuService extends Service implements ContextMenu {
   private readonly contextMenu = this.bind(ContextMenuService)
   private readonly restTab = this.bind(RESTTabService)
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.contextMenu.registerMenu(this)
   }
 

packages/hoppscotch-common/src/services/cookie-jar.service.ts

@@ -20,10 +20,6 @@ export class CookieJarService extends Service {
    */
   public cookieJar = ref(new Map<string, string[]>())
 
-  constructor() {
-    super()
-  }
-
   public parseSetCookieString(setCookieString: string) {
     return setCookieParse(setCookieString)
   }

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

@@ -14,9 +14,7 @@ import { Service } from "dioc"
 export class DebugService extends Service {
   public static readonly ID = "DEBUG_SERVICE"
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     console.log("DebugService is initialized...")
 
     const container = this.getContainer()

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

@@ -107,9 +107,7 @@ export class InspectionService extends Service {
 
   private readonly restTab = this.bind(RESTTabService)
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.initializeListeners()
   }
 

packages/hoppscotch-common/src/services/inspection/inspectors/environment.inspector.ts

@@ -53,9 +53,7 @@ export class EnvironmentInspectorService extends Service implements Inspector {
     }
   )[0]
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.inspection.registerInspector(this)
   }
 

packages/hoppscotch-common/src/services/inspection/inspectors/header.inspector.ts

@@ -22,9 +22,7 @@ export class HeaderInspectorService extends Service implements Inspector {
   private readonly inspection = this.bind(InspectionService)
   private readonly interceptorService = this.bind(InterceptorService)
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.inspection.registerInspector(this)
   }
 

packages/hoppscotch-common/src/services/inspection/inspectors/response.inspector.ts

@@ -23,9 +23,7 @@ export class ResponseInspectorService extends Service implements Inspector {
 
   private readonly inspection = this.bind(InspectionService)
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.inspection.registerInspector(this)
   }
 

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

@@ -178,9 +178,7 @@ export class InterceptorService extends Service {
     return this.interceptors.get(this.currentInterceptorID.value)
   })
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     // If the current interceptor is unselectable, select the first selectable one, else null
     watch([() => this.interceptors, this.currentInterceptorID], () => {
       if (!this.currentInterceptorID.value) return

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

@@ -109,10 +109,6 @@ export class OauthAuthService extends Service {
   public static readonly ID = "OAUTH_AUTH_SERVICE"
 
   static redirectURI = `${window.location.origin}/oauth`
-
-  constructor() {
-    super()
-  }
 }
 
 export const generateRandomString = () => {

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

@@ -89,10 +89,6 @@ export class PersistenceService extends Service {
 
   public hoppLocalConfigStorage: StorageLike = localStorage
 
-  constructor() {
-    super()
-  }
-
   private showErrorToast(localStorageKey: string) {
     const toast = useToast()
     toast.error(

packages/hoppscotch-common/src/services/secret-environment.service.ts

@@ -27,10 +27,6 @@ export class SecretEnvironmentService extends Service {
    */
   public secretEnvironments = reactive(new Map<string, SecretVariable[]>())
 
-  constructor() {
-    super()
-  }
-
   /**
    * Add a new secret environment.
    * @param id ID of the environment

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

@@ -6,6 +6,7 @@ import {
 import { nextTick, reactive, ref } from "vue"
 import { SpotlightSearcherResult } from "../../.."
 import { TestContainer } from "dioc/testing"
+import { Container } from "dioc"
 
 async function flushPromises() {
   return await new Promise((r) => setTimeout(r))
@@ -32,12 +33,15 @@ describe("StaticSpotlightSearcherService", () => {
         },
       })
 
-      constructor() {
-        super({
+      // TODO: dioc > v3 does not recommend using constructors, move to onServiceInit
+      constructor(c: Container) {
+        super(c, {
           searchFields: ["text"],
           fieldWeights: {},
         })
+      }
 
+      override onServiceInit() {
         this.setDocuments(this.documents)
       }
 
@@ -94,12 +98,15 @@ describe("StaticSpotlightSearcherService", () => {
         },
       })
 
-      constructor() {
-        super({
+      // TODO: dioc > v3 does not recommend using constructors, move to onServiceInit
+      constructor(c: Container) {
+        super(c, {
           searchFields: ["text"],
           fieldWeights: {},
         })
+      }
 
+      override onServiceInit() {
         this.setDocuments(this.documents)
       }
 
@@ -159,12 +166,15 @@ describe("StaticSpotlightSearcherService", () => {
         },
       })
 
-      constructor() {
-        super({
+      // TODO: dioc > v3 does not recommend using constructors, move to onServiceInit
+      constructor(c: Container) {
+        super(c, {
           searchFields: ["text"],
           fieldWeights: {},
         })
+      }
 
+      override onServiceInit() {
         this.setDocuments(this.documents)
       }
 
@@ -224,12 +234,15 @@ describe("StaticSpotlightSearcherService", () => {
         },
       })
 
-      constructor() {
-        super({
+      // TODO: dioc > v3 does not recommend using constructors, move to onServiceInit
+      constructor(c: Container) {
+        super(c, {
           searchFields: ["text"],
           fieldWeights: {},
         })
+      }
 
+      override onServiceInit() {
         this.setDocuments(this.documents)
       }
 
@@ -285,12 +298,15 @@ describe("StaticSpotlightSearcherService", () => {
         },
       })
 
-      constructor() {
-        super({
+      // TODO: dioc > v3 does not recommend using constructors, move to onServiceInit
+      constructor(c: Container) {
+        super(c, {
           searchFields: ["text"],
           fieldWeights: {},
         })
+      }
 
+      override onServiceInit() {
         this.setDocuments(this.documents)
       }
 
@@ -354,12 +370,15 @@ describe("StaticSpotlightSearcherService", () => {
         },
       })
 
-      constructor() {
-        super({
+      // TODO: dioc > v3 does not recommend using constructors, move to onServiceInit
+      constructor(c: Container) {
+        super(c, {
           searchFields: ["text", "alternate"],
           fieldWeights: {},
         })
+      }
 
+      override onServiceInit() {
         this.setDocuments(this.documents)
       }
 

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

@@ -1,4 +1,4 @@
-import { Service } from "dioc"
+import { Container, Service } from "dioc"
 import {
   type SpotlightSearcher,
   type SpotlightSearcherResult,
@@ -67,8 +67,12 @@ export abstract class StaticSpotlightSearcherService<
 
   private _documents: Record<string, Doc> = {}
 
-  constructor(private opts: StaticSpotlightSearcherOptions<Doc>) {
-    super()
+  // TODO: This pattern is no longer recommended in dioc > 3, move to something else
+  constructor(
+    c: Container,
+    private opts: StaticSpotlightSearcherOptions<Doc>
+  ) {
+    super(c)
 
     this.minisearch = new MiniSearch({
       fields: opts.searchFields as string[],

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

@@ -50,9 +50,7 @@ export class CollectionsSpotlightSearcherService
   private readonly spotlight = this.bind(SpotlightService)
   private readonly workspaceService = this.bind(WorkspaceService)
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.spotlight.registerSearcher(this)
   }
 

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

@@ -26,7 +26,7 @@ import IconEdit from "~icons/lucide/edit"
 import IconLayers from "~icons/lucide/layers"
 import IconTrash2 from "~icons/lucide/trash-2"
 
-import { Service } from "dioc"
+import { Container, Service } from "dioc"
 import * as TE from "fp-ts/TaskEither"
 import { pipe } from "fp-ts/function"
 import { cloneDeep } from "lodash-es"
@@ -164,15 +164,18 @@ export class EnvironmentsSpotlightSearcherService extends StaticSpotlightSearche
     },
   })
 
-  constructor() {
-    super({
+  // TODO: This pattern is no longer recommended in dioc > 3, move to something else
+  constructor(c: Container) {
+    super(c, {
       searchFields: ["text", "alternates"],
       fieldWeights: {
         text: 2,
         alternates: 1,
       },
     })
+  }
 
+  override onServiceInit() {
     this.setDocuments(this.documents)
     this.spotlight.registerSearcher(this)
   }
@@ -277,9 +280,7 @@ export class SwitchEnvSpotlightSearcherService
   private readonly workspaceService = this.bind(WorkspaceService)
   private teamEnvironmentList: TeamEnvironment[] = []
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.spotlight.registerSearcher(this)
   }
 

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

@@ -15,6 +15,7 @@ import IconBook from "~icons/lucide/book"
 import IconLifeBuoy from "~icons/lucide/life-buoy"
 import IconZap from "~icons/lucide/zap"
 import { platform } from "~/platform"
+import { Container } from "dioc"
 
 type Doc = {
   text: string | string[]
@@ -89,15 +90,18 @@ export class GeneralSpotlightSearcherService extends StaticSpotlightSearcherServ
     },
   })
 
-  constructor() {
-    super({
+  // TODO: This is not recommended as of dioc > 3. Move to onServiceInit instead
+  constructor(c: Container) {
+    super(c, {
       searchFields: ["text", "alternates"],
       fieldWeights: {
         text: 2,
         alternates: 1,
       },
     })
+  }
 
+  override onServiceInit() {
     this.setDocuments(this.documents)
     this.spotlight.registerSearcher(this)
   }

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

@@ -66,9 +66,7 @@ export class HistorySpotlightSearcherService
     }
   )[0]
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.spotlight.registerSearcher(this)
   }
 

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

@@ -31,9 +31,7 @@ export class InterceptorSpotlightSearcherService
   private readonly spotlight = this.bind(SpotlightService)
   private interceptorService = this.bind(InterceptorService)
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.spotlight.registerSearcher(this)
   }
 

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

@@ -8,6 +8,7 @@ import {
 } from "./base/static.searcher"
 
 import IconShare from "~icons/lucide/share"
+import { Container } from "dioc"
 
 type Doc = {
   text: string
@@ -39,15 +40,18 @@ export class MiscellaneousSpotlightSearcherService extends StaticSpotlightSearch
     },
   })
 
-  constructor() {
-    super({
+  // TODO: Constructors are no longer recommended as of dioc > 3, move to onServiceInit
+  constructor(c: Container) {
+    super(c, {
       searchFields: ["text", "alternates"],
       fieldWeights: {
         text: 2,
         alternates: 1,
       },
     })
+  }
 
+  override onServiceInit() {
     this.setDocuments(this.documents)
     this.spotlight.registerSearcher(this)
   }

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

@@ -8,6 +8,7 @@ import {
 } from "./base/static.searcher"
 
 import IconArrowRight from "~icons/lucide/arrow-right"
+import { Container } from "dioc"
 
 type Doc = {
   text: string
@@ -61,15 +62,18 @@ export class NavigationSpotlightSearcherService extends StaticSpotlightSearcherS
 
   private docKeys = Object.keys(this.documents)
 
-  constructor() {
-    super({
+  // TODO: Constructors are no longer recommended as of dioc > 3, use onServiceInit instead
+  constructor(c: Container) {
+    super(c, {
       searchFields: ["text", "alternates"],
       fieldWeights: {
         text: 2,
         alternates: 1,
       },
     })
+  }
 
+  override onServiceInit() {
     this.setDocuments(this.documents)
     this.spotlight.registerSearcher(this)
   }

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

@@ -20,6 +20,7 @@ import IconRotateCCW from "~icons/lucide/rotate-ccw"
 import IconSave from "~icons/lucide/save"
 import { GQLOptionTabs } from "~/components/graphql/RequestOptions.vue"
 import { RESTTabService } from "~/services/tab/rest"
+import { Container } from "dioc"
 
 type Doc = {
   text: string | string[]
@@ -224,15 +225,18 @@ export class RequestSpotlightSearcherService extends StaticSpotlightSearcherServ
     },
   })
 
-  constructor() {
-    super({
+  // TODO: Constructors are no longer recommended as of dioc > 3, use onServiceInit instead
+  constructor(c: Container) {
+    super(c, {
       searchFields: ["text", "alternates"],
       fieldWeights: {
         text: 2,
         alternates: 1,
       },
     })
+  }
 
+  override onServiceInit() {
     this.setDocuments(this.documents)
     this.spotlight.registerSearcher(this)
   }

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

@@ -9,6 +9,7 @@ import {
 
 import IconDownload from "~icons/lucide/download"
 import IconCopy from "~icons/lucide/copy"
+import { Container } from "dioc"
 
 type Doc = {
   text: string
@@ -56,15 +57,18 @@ export class ResponseSpotlightSearcherService extends StaticSpotlightSearcherSer
     },
   })
 
-  constructor() {
-    super({
+  // TODO: Constructors are no longer recommended as of dioc > 3, move to onServiceInit
+  constructor(c: Container) {
+    super(c, {
       searchFields: ["text", "alternates"],
       fieldWeights: {
         text: 2,
         alternates: 1,
       },
     })
+  }
 
+  override onServiceInit() {
     this.setDocuments(this.documents)
     this.spotlight.registerSearcher(this)
   }

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

@@ -15,6 +15,7 @@ import IconMonitor from "~icons/lucide/monitor"
 import IconMoon from "~icons/lucide/moon"
 import IconSun from "~icons/lucide/sun"
 import IconCheckCircle from "~icons/lucide/check-circle"
+import { Container } from "dioc"
 
 type Doc = {
   text: string | string[]
@@ -100,15 +101,18 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
     },
   })
 
-  constructor() {
-    super({
+  // TODO: Constuctors are no longer recommended as of dioc > 3, move to onServiceInit
+  constructor(c: Container) {
+    super(c, {
       searchFields: ["text", "alternates"],
       fieldWeights: {
         text: 2,
         alternates: 1,
       },
     })
+  }
 
+  override onServiceInit() {
     this.setDocuments(this.documents)
     this.spotlight.registerSearcher(this)
   }

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

@@ -14,6 +14,7 @@ import IconXSquare from "~icons/lucide/x-square"
 import { invokeAction } from "~/helpers/actions"
 import { RESTTabService } from "~/services/tab/rest"
 import { GQLTabService } from "~/services/tab/graphql"
+import { Container } from "dioc"
 
 type Doc = {
   text: string | string[]
@@ -89,15 +90,18 @@ export class TabSpotlightSearcherService extends StaticSpotlightSearcherService<
     },
   })
 
-  constructor() {
-    super({
+  // TODO: Constructors are no longer recommended as of dioc > 3, use onServiceInit instead
+  constructor(c: Container) {
+    super(c, {
       searchFields: ["text", "alternates"],
       fieldWeights: {
         text: 2,
         alternates: 1,
       },
     })
+  }
 
+  override onServiceInit() {
     this.setDocuments(this.documents)
     this.spotlight.registerSearcher(this)
   }

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

@@ -39,9 +39,7 @@ export class TeamsSpotlightSearcherService
 
   private readonly tabs = this.bind(RESTTabService)
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.spotlight.registerSearcher(this)
   }
 

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

@@ -9,6 +9,7 @@ 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"
+import { Container } from "dioc"
 
 type Doc = {
   text: string
@@ -59,15 +60,18 @@ export class UserSpotlightSearcherService extends StaticSpotlightSearcherService
     },
   })
 
-  constructor() {
-    super({
+  // TODO: Constructors are no longer recommended as of dioc > 3, move to onServiceInit
+  constructor(c: Container) {
+    super(c, {
       searchFields: ["text", "alternates"],
       fieldWeights: {
         text: 2,
         alternates: 1,
       },
     })
+  }
 
+  override onServiceInit(): void {
     this.setDocuments(this.documents)
     this.spotlight.registerSearcher(this)
   }

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

@@ -21,7 +21,7 @@ import {
   StaticSpotlightSearcherService,
 } from "./base/static.searcher"
 
-import { Service } from "dioc"
+import { Container, Service } from "dioc"
 import * as E from "fp-ts/Either"
 import MiniSearch from "minisearch"
 import IconCheckCircle from "~/components/app/spotlight/entry/IconSelected.vue"
@@ -102,15 +102,18 @@ export class WorkspaceSpotlightSearcherService extends StaticSpotlightSearcherSe
     },
   })
 
-  constructor() {
-    super({
+  // TODO: Constructors are no longer recommended as of dioc > 3, move to onServiceInit
+  constructor(c: Container) {
+    super(c, {
       searchFields: ["text", "alternates"],
       fieldWeights: {
         text: 2,
         alternates: 1,
       },
     })
+  }
 
+  override onServiceInit() {
     this.setDocuments(this.documents)
     this.spotlight.registerSearcher(this)
   }
@@ -166,9 +169,7 @@ export class SwitchWorkspaceSpotlightSearcherService
   private readonly spotlight = this.bind(SpotlightService)
   private readonly workspaceService = this.bind(WorkspaceService)
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.spotlight.registerSearcher(this)
   }
 

packages/hoppscotch-common/src/services/tab/__tests__/tab.service.spec.ts

@@ -6,9 +6,7 @@ import { reactive } from "vue"
 class MockTabService extends TabService<{ request: string }> {
   public static readonly ID = "MOCK_TAB_SERVICE"
 
-  constructor() {
-    super()
-
+  override onServiceInit() {
     this.tabMap = reactive(
       new Map([
         [

packages/hoppscotch-common/src/services/tab/graphql.ts

@@ -3,12 +3,15 @@ import { getDefaultGQLRequest } from "~/helpers/graphql/default"
 import { HoppGQLDocument, HoppGQLSaveContext } from "~/helpers/graphql/document"
 import { TabService } from "./tab"
 import { computed } from "vue"
+import { Container } from "dioc"
 
 export class GQLTabService extends TabService<HoppGQLDocument> {
   public static readonly ID = "GQL_TAB_SERVICE"
 
-  constructor() {
-    super()
+  // TODO: Moving this to `onServiceInit` breaks `persistableTabState`
+  // Figure out how to fix this
+  constructor(c: Container) {
+    super(c)
 
     this.tabMap.set("test", {
       id: "test",

packages/hoppscotch-common/src/services/tab/rest.ts

@@ -3,12 +3,15 @@ import { computed } from "vue"
 import { getDefaultRESTRequest } from "~/helpers/rest/default"
 import { HoppRESTDocument, HoppRESTSaveContext } from "~/helpers/rest/document"
 import { TabService } from "./tab"
+import { Container } from "dioc"
 
 export class RESTTabService extends TabService<HoppRESTDocument> {
   public static readonly ID = "REST_TAB_SERVICE"
 
-  constructor() {
-    super()
+  // TODO: Moving this to `onServiceInit` breaks `persistableTabState`
+  // Figure out how to fix this
+  constructor(c: Container) {
+    super(c)
 
     this.tabMap.set("test", {
       id: "test",

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

@@ -5,13 +5,24 @@ import { useStreamStatic } from "~/composables/stream"
 import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
 import { platform } from "~/platform"
 import { min } from "lodash-es"
+import { TeamMemberRole } from "~/helpers/backend/graphql"
 
 /**
  * Defines a workspace and its information
  */
-export type Workspace =
-  | { type: "personal" }
-  | { type: "team"; teamID: string; teamName: string }
+
+export type PersonalWorkspace = {
+  type: "personal"
+}
+
+export type TeamWorkspace = {
+  type: "team"
+  teamID: string
+  teamName: string
+  role: TeamMemberRole | null | undefined
+}
+
+export type Workspace = PersonalWorkspace | TeamWorkspace
 
 export type WorkspaceServiceEvent = {
   type: "managed-team-list-adapter-polled"
@@ -48,8 +59,7 @@ export class WorkspaceService extends Service<WorkspaceServiceEvent> {
       -1
   )
 
-  constructor() {
-    super()
+  override onServiceInit() {
     // Dispose the managed team list adapter when the user logs out
     // and initialize it when the user logs in
     watch(

packages/hoppscotch-selfhost-desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/selfhost-desktop",
   "private": true,
-  "version": "2024.3.0",
+  "version": "2024.3.3",
   "type": "module",
   "scripts": {
     "dev:vite": "vite",
@@ -23,7 +23,7 @@
     "@vueuse/core": "10.5.0",
     "axios": "0.21.4",
     "buffer": "6.0.3",
-    "dioc": "1.0.1",
+    "dioc": "3.0.1",
     "environments.api": "link:@platform/environments/environments.api",
     "event": "link:@tauri-apps/api/event",
     "fp-ts": "2.16.1",
@@ -78,4 +78,4 @@
     "vite-plugin-vue-layouts": "0.7.0",
     "vue-tsc": "1.8.8"
   }
-}
+}

packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.lock

@@ -1260,7 +1260,7 @@ dependencies = [
 
 [[package]]
 name = "hoppscotch-desktop"
-version = "24.3.1"
+version = "24.3.3"
 dependencies = [
  "cocoa 0.25.0",
  "hex_color",

packages/hoppscotch-selfhost-desktop/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "hoppscotch-desktop"
-version = "24.3.0"
+version = "24.3.3"
 description = "A Tauri App"
 authors = ["you"]
 license = ""

packages/hoppscotch-selfhost-desktop/src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Hoppscotch",
-    "version": "24.3.1"
+    "version": "24.3.3"
   },
   "tauri": {
     "allowlist": {

packages/hoppscotch-selfhost-desktop/src/platform/interceptors/native.ts

@@ -138,10 +138,6 @@ export class NativeInterceptorService extends Service implements Interceptor {
 
   public cookieJarService = this.bind(CookieJarService)
 
-  constructor() {
-    super()
-  }
-
   public runRequest(req: any) {
     const processedReq = preProcessRequest(req)
 

packages/hoppscotch-selfhost-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/selfhost-web",
   "private": true,
-  "version": "2024.3.1",
+  "version": "2024.3.3",
   "type": "module",
   "scripts": {
     "dev:vite": "vite",

packages/hoppscotch-sh-admin/locales/en.json

@@ -52,7 +52,8 @@
       "title": "Server is restarting"
     },
     "save_changes": "Save Changes",
-    "title": "Configurations"
+    "title": "Configurations",
+    "update_failure": "Failed to update server configurations"
   },
   "data_sharing": {
     "description": "Share anonymous data usage to improve Hoppscotch",

packages/hoppscotch-sh-admin/package.json

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

packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue

@@ -69,18 +69,18 @@
 import { useVModel } from '@vueuse/core';
 import { reactive } from 'vue';
 import { useI18n } from '~/composables/i18n';
-import { Config, SsoAuthProviders } from '~/composables/useConfigHandler';
+import { ServerConfigs, SsoAuthProviders } from '~/helpers/configs';
 import IconEye from '~icons/lucide/eye';
 import IconEyeOff from '~icons/lucide/eye-off';
 
 const t = useI18n();
 
 const props = defineProps<{
-  config: Config;
+  config: ServerConfigs;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:config', v: Config): void;
+  (e: 'update:config', v: ServerConfigs): void;
 }>();
 
 const workingConfigs = useVModel(props, 'config', emit);
@@ -93,7 +93,7 @@ const capitalize = (text: string) =>
 type ProviderFieldKeys = keyof ProviderFields;
 
 type ProviderFields = {
-  [Field in keyof Config['providers'][SsoAuthProviders]['fields']]: boolean;
+  [Field in keyof ServerConfigs['providers'][SsoAuthProviders]['fields']]: boolean;
 } & Partial<{ tenant: boolean }>;
 
 type ProviderFieldMetadata = {

packages/hoppscotch-sh-admin/src/components/settings/Configurations.vue

@@ -9,14 +9,14 @@
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core';
-import { Config } from '~/composables/useConfigHandler';
+import { ServerConfigs } from '~/helpers/configs';
 
 const props = defineProps<{
-  config: Config;
+  config: ServerConfigs;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:config', v: Config): void;
+  (e: 'update:config', v: ServerConfigs): void;
 }>();
 
 const workingConfigs = useVModel(props, 'config', emit);

packages/hoppscotch-sh-admin/src/components/settings/DataSharing.vue

@@ -38,17 +38,17 @@
 import { useVModel } from '@vueuse/core';
 import { computed } from 'vue';
 import { useI18n } from '~/composables/i18n';
-import { Config } from '~/composables/useConfigHandler';
+import { ServerConfigs } from '~/helpers/configs';
 import IconShieldQuestion from '~icons/lucide/shield-question';
 
 const t = useI18n();
 
 const props = defineProps<{
-  config: Config;
+  config: ServerConfigs;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:config', v: Config): void;
+  (e: 'update:config', v: ServerConfigs): void;
 }>();
 
 const workingConfigs = useVModel(props, 'config', emit);

packages/hoppscotch-sh-admin/src/components/settings/ServerRestart.vue

@@ -17,20 +17,21 @@ import { useMutation } from '@urql/vue';
 import { onMounted, ref } from 'vue';
 import { useI18n } from '~/composables/i18n';
 import { useToast } from '~/composables/toast';
-import { Config, useConfigHandler } from '~/composables/useConfigHandler';
+import { useConfigHandler } from '~/composables/useConfigHandler';
 import {
   EnableAndDisableSsoDocument,
   ResetInfraConfigsDocument,
-  UpdateInfraConfigsDocument,
   ToggleAnalyticsCollectionDocument,
+  UpdateInfraConfigsDocument,
 } from '~/helpers/backend/graphql';
+import { ServerConfigs } from '~/helpers/configs';
 
 const t = useI18n();
 const toast = useToast();
 
 const props = withDefaults(
   defineProps<{
-    workingConfigs?: Config;
+    workingConfigs?: ServerConfigs;
     reset?: boolean;
   }>(),
   {

packages/hoppscotch-sh-admin/src/components/settings/SmtpConfiguration.vue

@@ -58,18 +58,18 @@
 import { useVModel } from '@vueuse/core';
 import { computed, reactive } from 'vue';
 import { useI18n } from '~/composables/i18n';
-import { Config } from '~/composables/useConfigHandler';
+import { ServerConfigs } from '~/helpers/configs';
 import IconEye from '~icons/lucide/eye';
 import IconEyeOff from '~icons/lucide/eye-off';
 
 const t = useI18n();
 
 const props = defineProps<{
-  config: Config;
+  config: ServerConfigs;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:config', v: Config): void;
+  (e: 'update:config', v: ServerConfigs): void;
 }>();
 
 const workingConfigs = useVModel(props, 'config', emit);
@@ -87,7 +87,7 @@ const smtpConfigs = computed({
 // Mask sensitive fields
 type Field = {
   name: string;
-  key: keyof Config['mailConfigs']['fields'];
+  key: keyof ServerConfigs['mailConfigs']['fields'];
 };
 
 const smtpConfigFields = reactive<Field[]>([
@@ -100,10 +100,10 @@ const maskState = reactive<Record<string, boolean>>({
   mailer_from_address: true,
 });
 
-const toggleMask = (fieldKey: keyof Config['mailConfigs']['fields']) => {
+const toggleMask = (fieldKey: keyof ServerConfigs['mailConfigs']['fields']) => {
   maskState[fieldKey] = !maskState[fieldKey];
 };
 
-const isMasked = (fieldKey: keyof Config['mailConfigs']['fields']) =>
+const isMasked = (fieldKey: keyof ServerConfigs['mailConfigs']['fields']) =>
   maskState[fieldKey];
 </script>

packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts

@@ -1,83 +1,39 @@
 import { AnyVariables, UseMutationResponse } from '@urql/vue';
 import { cloneDeep } from 'lodash-es';
-import { computed, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
+
 import { useI18n } from '~/composables/i18n';
 import {
   AllowedAuthProvidersDocument,
+  AuthProvider,
   EnableAndDisableSsoArgs,
   EnableAndDisableSsoMutation,
   InfraConfigArgs,
   InfraConfigEnum,
   InfraConfigsDocument,
   ResetInfraConfigsMutation,
+  ServiceStatus,
   ToggleAnalyticsCollectionMutation,
   UpdateInfraConfigsMutation,
 } from '~/helpers/backend/graphql';
+import {
+  ALL_CONFIGS,
+  ConfigSection,
+  ConfigTransform,
+  GITHUB_CONFIGS,
+  GOOGLE_CONFIGS,
+  MAIL_CONFIGS,
+  MICROSOFT_CONFIGS,
+  ServerConfigs,
+  UpdatedConfigs,
+} from '~/helpers/configs';
 import { useToast } from './toast';
 import { useClientHandler } from './useClientHandler';
 
-// Types
-export type SsoAuthProviders = 'google' | 'microsoft' | 'github';
-
-export type Config = {
-  providers: {
-    google: {
-      name: SsoAuthProviders;
-      enabled: boolean;
-      fields: {
-        client_id: string;
-        client_secret: string;
-        callback_url: string;
-        scope: string;
-      };
-    };
-    github: {
-      name: SsoAuthProviders;
-      enabled: boolean;
-      fields: {
-        client_id: string;
-        client_secret: string;
-        callback_url: string;
-        scope: string;
-      };
-    };
-    microsoft: {
-      name: SsoAuthProviders;
-      enabled: boolean;
-      fields: {
-        client_id: string;
-        client_secret: string;
-        callback_url: string;
-        scope: string;
-        tenant: string;
-      };
-    };
-  };
-
-  mailConfigs: {
-    name: string;
-    enabled: boolean;
-    fields: {
-      mailer_smtp_url: string;
-      mailer_from_address: string;
-    };
-  };
-
-  dataSharingConfigs: {
-    name: string;
-    enabled: boolean;
-  };
-};
-
-type UpdatedConfigs = {
-  name: string;
-  value: string;
-};
-
 /** Composable that handles all operations related to server configurations
  * @param updatedConfigs A Config Object contatining the updated configs
  */
-export function useConfigHandler(updatedConfigs?: Config) {
+export function useConfigHandler(updatedConfigs?: ServerConfigs) {
   const t = useI18n();
   const toast = useToast();
 
@@ -90,24 +46,9 @@ export function useConfigHandler(updatedConfigs?: Config) {
   } = useClientHandler(
     InfraConfigsDocument,
     {
-      configNames: [
-        'GOOGLE_CLIENT_ID',
-        'GOOGLE_CLIENT_SECRET',
-        'GOOGLE_CALLBACK_URL',
-        'GOOGLE_SCOPE',
-        'MICROSOFT_CLIENT_ID',
-        'MICROSOFT_CLIENT_SECRET',
-        'MICROSOFT_CALLBACK_URL',
-        'MICROSOFT_SCOPE',
-        'MICROSOFT_TENANT',
-        'GITHUB_CLIENT_ID',
-        'GITHUB_CLIENT_SECRET',
-        'GITHUB_CALLBACK_URL',
-        'GITHUB_SCOPE',
-        'MAILER_SMTP_URL',
-        'MAILER_ADDRESS_FROM',
-        'ALLOW_ANALYTICS_COLLECTION',
-      ] as InfraConfigEnum[],
+      configNames: ALL_CONFIGS.flat().map(
+        ({ name }) => name
+      ) as InfraConfigEnum[],
     },
     (x) => x.infraConfigs
   );
@@ -125,14 +66,14 @@ export function useConfigHandler(updatedConfigs?: Config) {
   );
 
   // Current and working configs
-  const currentConfigs = ref<Config>();
-  const workingConfigs = ref<Config>();
+  const currentConfigs = ref<ServerConfigs>();
+  const workingConfigs = ref<ServerConfigs>();
 
   onMounted(async () => {
     await fetchInfraConfigs();
     await fetchAllowedAuthProviders();
 
-    const getFieldValue = (name: string) =>
+    const getFieldValue = (name: InfraConfigEnum) =>
       infraConfigs.value.find((x) => x.name === name)?.value ?? '';
 
     // Transforming the fetched data into a Configs object
@@ -140,42 +81,42 @@ export function useConfigHandler(updatedConfigs?: Config) {
       providers: {
         google: {
           name: 'google',
-          enabled: allowedAuthProviders.value.includes('GOOGLE'),
+          enabled: allowedAuthProviders.value.includes(AuthProvider.Google),
           fields: {
-            client_id: getFieldValue('GOOGLE_CLIENT_ID'),
-            client_secret: getFieldValue('GOOGLE_CLIENT_SECRET'),
-            callback_url: getFieldValue('GOOGLE_CALLBACK_URL'),
-            scope: getFieldValue('GOOGLE_SCOPE'),
+            client_id: getFieldValue(InfraConfigEnum.GoogleClientId),
+            client_secret: getFieldValue(InfraConfigEnum.GoogleClientSecret),
+            callback_url: getFieldValue(InfraConfigEnum.GoogleCallbackUrl),
+            scope: getFieldValue(InfraConfigEnum.GoogleScope),
           },
         },
         github: {
           name: 'github',
-          enabled: allowedAuthProviders.value.includes('GITHUB'),
+          enabled: allowedAuthProviders.value.includes(AuthProvider.Github),
           fields: {
-            client_id: getFieldValue('GITHUB_CLIENT_ID'),
-            client_secret: getFieldValue('GITHUB_CLIENT_SECRET'),
-            callback_url: getFieldValue('GITHUB_CALLBACK_URL'),
-            scope: getFieldValue('GITHUB_SCOPE'),
+            client_id: getFieldValue(InfraConfigEnum.GithubClientId),
+            client_secret: getFieldValue(InfraConfigEnum.GithubClientSecret),
+            callback_url: getFieldValue(InfraConfigEnum.GoogleCallbackUrl),
+            scope: getFieldValue(InfraConfigEnum.GithubScope),
           },
         },
         microsoft: {
           name: 'microsoft',
-          enabled: allowedAuthProviders.value.includes('MICROSOFT'),
+          enabled: allowedAuthProviders.value.includes(AuthProvider.Microsoft),
           fields: {
-            client_id: getFieldValue('MICROSOFT_CLIENT_ID'),
-            client_secret: getFieldValue('MICROSOFT_CLIENT_SECRET'),
-            callback_url: getFieldValue('MICROSOFT_CALLBACK_URL'),
-            scope: getFieldValue('MICROSOFT_SCOPE'),
-            tenant: getFieldValue('MICROSOFT_TENANT'),
+            client_id: getFieldValue(InfraConfigEnum.MicrosoftClientId),
+            client_secret: getFieldValue(InfraConfigEnum.MicrosoftClientSecret),
+            callback_url: getFieldValue(InfraConfigEnum.MicrosoftCallbackUrl),
+            scope: getFieldValue(InfraConfigEnum.MicrosoftScope),
+            tenant: getFieldValue(InfraConfigEnum.MicrosoftTenant),
           },
         },
       },
       mailConfigs: {
         name: 'email',
-        enabled: allowedAuthProviders.value.includes('EMAIL'),
+        enabled: allowedAuthProviders.value.includes(AuthProvider.Email),
         fields: {
-          mailer_smtp_url: getFieldValue('MAILER_SMTP_URL'),
-          mailer_from_address: getFieldValue('MAILER_ADDRESS_FROM'),
+          mailer_smtp_url: getFieldValue(InfraConfigEnum.MailerSmtpUrl),
+          mailer_from_address: getFieldValue(InfraConfigEnum.MailerAddressFrom),
         },
       },
       dataSharingConfigs: {
@@ -191,138 +132,13 @@ export function useConfigHandler(updatedConfigs?: Config) {
     workingConfigs.value = cloneDeep(currentConfigs.value);
   });
 
-  // Transforming the working configs back into the format required by the mutations
-  const updatedInfraConfigs = computed(() => {
-    let config: UpdatedConfigs[] = [
-      {
-        name: '',
-        value: '',
-      },
-    ];
+  /*
+    Check if any of the config fields are empty
+  */
 
-    if (updatedConfigs?.providers.google.enabled) {
-      config.push(
-        {
-          name: 'GOOGLE_CLIENT_ID',
-          value: updatedConfigs?.providers.google.fields.client_id ?? '',
-        },
-        {
-          name: 'GOOGLE_CLIENT_SECRET',
-          value: updatedConfigs?.providers.google.fields.client_secret ?? '',
-        },
-        {
-          name: 'GOOGLE_CALLBACK_URL',
-          value: updatedConfigs?.providers.google.fields.callback_url ?? '',
-        },
-        {
-          name: 'GOOGLE_SCOPE',
-          value: updatedConfigs?.providers.google.fields.scope ?? '',
-        }
-      );
-    } else {
-      config = config.filter(
-        (item) =>
-          item.name !== 'GOOGLE_CLIENT_ID' &&
-          item.name !== 'GOOGLE_CLIENT_SECRET' &&
-          item.name !== 'GOOGLE_CALLBACK_URL' &&
-          item.name !== 'GOOGLE_SCOPE'
-      );
-    }
-    if (updatedConfigs?.providers.microsoft.enabled) {
-      config.push(
-        {
-          name: 'MICROSOFT_CLIENT_ID',
-          value: updatedConfigs?.providers.microsoft.fields.client_id ?? '',
-        },
-        {
-          name: 'MICROSOFT_CLIENT_SECRET',
-          value: updatedConfigs?.providers.microsoft.fields.client_secret ?? '',
-        },
-        {
-          name: 'MICROSOFT_CALLBACK_URL',
-          value: updatedConfigs?.providers.microsoft.fields.callback_url ?? '',
-        },
-        {
-          name: 'MICROSOFT_SCOPE',
-          value: updatedConfigs?.providers.microsoft.fields.scope ?? '',
-        },
-        {
-          name: 'MICROSOFT_TENANT',
-          value: updatedConfigs?.providers.microsoft.fields.tenant ?? '',
-        }
-      );
-    } else {
-      config = config.filter(
-        (item) =>
-          item.name !== 'MICROSOFT_CLIENT_ID' &&
-          item.name !== 'MICROSOFT_CLIENT_SECRET' &&
-          item.name !== 'MICROSOFT_CALLBACK_URL' &&
-          item.name !== 'MICROSOFT_SCOPE' &&
-          item.name !== 'MICROSOFT_TENANT'
-      );
-    }
-
-    if (updatedConfigs?.providers.github.enabled) {
-      config.push(
-        {
-          name: 'GITHUB_CLIENT_ID',
-          value: updatedConfigs?.providers.github.fields.client_id ?? '',
-        },
-        {
-          name: 'GITHUB_CLIENT_SECRET',
-          value: updatedConfigs?.providers.github.fields.client_secret ?? '',
-        },
-        {
-          name: 'GITHUB_CALLBACK_URL',
-          value: updatedConfigs?.providers.github.fields.callback_url ?? '',
-        },
-        {
-          name: 'GITHUB_SCOPE',
-          value: updatedConfigs?.providers.github.fields.scope ?? '',
-        }
-      );
-    } else {
-      config = config.filter(
-        (item) =>
-          item.name !== 'GITHUB_CLIENT_ID' &&
-          item.name !== 'GITHUB_CLIENT_SECRET' &&
-          item.name !== 'GITHUB_CALLBACK_URL' &&
-          item.name !== 'GITHUB_SCOPE'
-      );
-    }
-
-    if (updatedConfigs?.mailConfigs.enabled) {
-      config.push(
-        {
-          name: 'MAILER_SMTP_URL',
-          value: updatedConfigs?.mailConfigs.fields.mailer_smtp_url ?? '',
-        },
-        {
-          name: 'MAILER_ADDRESS_FROM',
-          value: updatedConfigs?.mailConfigs.fields.mailer_from_address ?? '',
-        }
-      );
-    } else {
-      config = config.filter(
-        (item) =>
-          item.name !== 'MAILER_SMTP_URL' && item.name !== 'MAILER_ADDRESS_FROM'
-      );
-    }
-
-    config = config.filter((item) => item.name !== '');
-
-    return config;
-  });
-
-  // Checking if any of the config fields are empty
   const isFieldEmpty = (field: string) => field.trim() === '';
 
-  type ConfigSection = {
-    enabled: boolean;
-    fields: Record<string, string>;
-  };
-
-  const AreAnyConfigFieldsEmpty = (config: Config): boolean => {
+  const AreAnyConfigFieldsEmpty = (config: ServerConfigs): boolean => {
     const sections: Array<ConfigSection> = [
       config.providers.github,
       config.providers.google,
@@ -337,28 +153,44 @@ export function useConfigHandler(updatedConfigs?: Config) {
   };
 
   // Transforming the working configs back into the format required by the mutations
-  const updatedAllowedAuthProviders = computed(() => {
-    return [
+  const transformInfraConfigs = () => {
+    const updatedWorkingConfigs: ConfigTransform[] = [
       {
-        provider: 'GOOGLE',
-        status: updatedConfigs?.providers.google.enabled ? 'ENABLE' : 'DISABLE',
+        config: GOOGLE_CONFIGS,
+        enabled: updatedConfigs?.providers.google.enabled,
+        fields: updatedConfigs?.providers.google.fields,
       },
       {
-        provider: 'MICROSOFT',
-        status: updatedConfigs?.providers.microsoft.enabled
-          ? 'ENABLE'
-          : 'DISABLE',
+        config: GITHUB_CONFIGS,
+        enabled: updatedConfigs?.providers.github.enabled,
+        fields: updatedConfigs?.providers.github.fields,
       },
       {
-        provider: 'GITHUB',
-        status: updatedConfigs?.providers.github.enabled ? 'ENABLE' : 'DISABLE',
+        config: MICROSOFT_CONFIGS,
+        enabled: updatedConfigs?.providers.microsoft.enabled,
+        fields: updatedConfigs?.providers.microsoft.fields,
       },
       {
-        provider: 'EMAIL',
-        status: updatedConfigs?.mailConfigs.enabled ? 'ENABLE' : 'DISABLE',
+        config: MAIL_CONFIGS,
+        enabled: updatedConfigs?.mailConfigs.enabled,
+        fields: updatedConfigs?.mailConfigs.fields,
       },
     ];
-  });
+
+    const transformedConfigs: UpdatedConfigs[] = [];
+
+    updatedWorkingConfigs.forEach(({ config, enabled, fields }) => {
+      config.forEach(({ name, key }) => {
+        if (enabled && fields) {
+          const value =
+            typeof fields === 'string' ? fields : String(fields[key]);
+          transformedConfigs.push({ name, value });
+        }
+      });
+    });
+
+    return transformedConfigs;
+  };
 
   // Generic function to handle mutation execution and error handling
   const executeMutation = async <T, V>(
@@ -379,27 +211,59 @@ export function useConfigHandler(updatedConfigs?: Config) {
   // Updating the auth provider configurations
   const updateAuthProvider = (
     updateProviderStatus: UseMutationResponse<EnableAndDisableSsoMutation>
-  ) =>
-    executeMutation(
+  ) => {
+    const updatedAllowedAuthProviders: EnableAndDisableSsoArgs[] = [
+      {
+        provider: AuthProvider.Google,
+        status: updatedConfigs?.providers.google.enabled
+          ? ServiceStatus.Enable
+          : ServiceStatus.Disable,
+      },
+      {
+        provider: AuthProvider.Microsoft,
+        status: updatedConfigs?.providers.microsoft.enabled
+          ? ServiceStatus.Enable
+          : ServiceStatus.Disable,
+      },
+      {
+        provider: AuthProvider.Github,
+        status: updatedConfigs?.providers.github.enabled
+          ? ServiceStatus.Enable
+          : ServiceStatus.Disable,
+      },
+      {
+        provider: AuthProvider.Email,
+        status: updatedConfigs?.mailConfigs.enabled
+          ? ServiceStatus.Enable
+          : ServiceStatus.Disable,
+      },
+    ];
+
+    return executeMutation(
       updateProviderStatus,
       {
-        providerInfo:
-          updatedAllowedAuthProviders.value as EnableAndDisableSsoArgs[],
+        providerInfo: updatedAllowedAuthProviders,
       },
       'configs.auth_providers.update_failure'
     );
+  };
 
   // Updating the infra configurations
   const updateInfraConfigs = (
     updateInfraConfigsMutation: UseMutationResponse<UpdateInfraConfigsMutation>
-  ) =>
-    executeMutation(
+  ) => {
+    const infraConfigs: InfraConfigArgs[] = updatedConfigs
+      ? transformInfraConfigs()
+      : [];
+
+    return executeMutation(
       updateInfraConfigsMutation,
       {
-        infraConfigs: updatedInfraConfigs.value as InfraConfigArgs[],
+        infraConfigs,
       },
-      'configs.mail_configs.update_failure'
+      'configs.update_failure'
     );
+  };
 
   // Resetting the infra configurations
   const resetInfraConfigs = (
@@ -411,7 +275,6 @@ export function useConfigHandler(updatedConfigs?: Config) {
       'configs.reset.failure'
     );
 
-  // Updating the data sharing configurations
   const updateDataSharingConfigs = (
     toggleDataSharingMutation: UseMutationResponse<ToggleAnalyticsCollectionMutation>
   ) =>
@@ -419,8 +282,8 @@ export function useConfigHandler(updatedConfigs?: Config) {
       toggleDataSharingMutation,
       {
         status: updatedConfigs?.dataSharingConfigs.enabled
-          ? 'ENABLE'
-          : 'DISABLE',
+          ? ServiceStatus.Enable
+          : ServiceStatus.Disable,
       },
       'configs.data_sharing.update_failure'
     );
@@ -428,8 +291,6 @@ export function useConfigHandler(updatedConfigs?: Config) {
   return {
     currentConfigs,
     workingConfigs,
-    updatedInfraConfigs,
-    updatedAllowedAuthProviders,
     updateAuthProvider,
     updateDataSharingConfigs,
     updateInfraConfigs,