chore: minor ui improvements

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

.devcontainer/devcontainer.json

@@ -5,5 +5,5 @@
   "features": {
     "ghcr.io/NicoVIII/devcontainer-features/pnpm:1": {}
   },
-  "postCreateCommand": "mv .env.example .env && pnpm i"
+  "postCreateCommand": "cp .env.example .env && pnpm i"
 }

.env.example

@@ -12,8 +12,8 @@ SESSION_SECRET='add some secret here'
 
 # Hoppscotch App Domain Config
 REDIRECT_URL="http://localhost:3000"
-WHITELISTED_ORIGINS = "http://localhost:3170,http://localhost:3000,http://localhost:3100"
-VITE_ALLOWED_AUTH_PROVIDERS = GOOGLE,GITHUB,MICROSOFT,EMAIL
+WHITELISTED_ORIGINS="http://localhost:3170,http://localhost:3000,http://localhost:3100"
+VITE_ALLOWED_AUTH_PROVIDERS=GOOGLE,GITHUB,MICROSOFT,EMAIL
 
 # Google Auth Config
 GOOGLE_CLIENT_ID="************************************************"
@@ -59,3 +59,6 @@ VITE_BACKEND_API_URL=http://localhost:3170/v1
 # Terms Of Service And Privacy Policy Links (Optional)
 VITE_APP_TOS_LINK=https://docs.hoppscotch.io/support/terms
 VITE_APP_PRIVACY_POLICY_LINK=https://docs.hoppscotch.io/support/privacy
+
+# Set to `true` for subpath based access
+ENABLE_SUBPATH_BASED_ACCESS=false

.github/workflows/release-push-docker.yml

@@ -18,6 +18,9 @@ jobs:
       - name: Setup QEMU
         uses: docker/setup-qemu-action@v3
 
+      - name: Setup Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
       - name: Log in to Docker Hub
         uses: docker/login-action@v2
         with:

.github/workflows/ui.yml

@@ -36,7 +36,7 @@ jobs:
 
       # Deploy the ui site with netlify-cli
       - name: Deploy to Netlify (ui)
-        run: npx netlify-cli deploy --dir=packages/hoppscotch-ui/.histoire/dist --prod
+        run: npx netlify-cli@15.11.0 deploy --dir=packages/hoppscotch-ui/.histoire/dist --prod
         env:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_UI_SITE_ID }}
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

.vscode/extensions.json

@@ -1,14 +0,0 @@
-{
-  "recommendations": [
-    "antfu.iconify",
-    "vue.volar",
-    "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint",
-    "editorconfig.editorconfig",
-    "csstools.postcss",
-    "folke.vscode-monorepo-workspace"
-  ],
-  "unwantedRecommendations": [
-    "octref.vetur"
-  ]
-}

aio-multiport-setup.Caddyfile

@@ -0,0 +1,19 @@
+:3000 {
+	try_files {path} /
+	root * /site/selfhost-web
+	file_server
+}
+
+:3100 {
+	try_files {path} /
+	root * /site/sh-admin-multiport-setup
+	file_server
+}
+
+:3170 {
+	reverse_proxy localhost:8080
+}
+
+:80 {
+	respond 404
+}

aio-subpath-access.Caddyfile

@@ -0,0 +1,37 @@
+:3000 {
+	respond 404
+}
+
+:3100 {
+	respond 404
+}
+
+:3170 {
+	reverse_proxy localhost:8080
+}
+
+:80 {
+	# Serve the `selfhost-web` SPA by default
+	root * /site/selfhost-web
+	file_server
+
+	handle_path /admin* {
+		root * /site/sh-admin-subpath-access
+		file_server
+
+		# Ensures any non-existent file in the server is routed to the SPA
+		try_files {path} /
+	}
+
+	# Handle requests under `/backend*` path
+	handle_path /backend* {
+		reverse_proxy localhost:8080
+	}
+
+	# Catch-all route for unknown paths, serves `selfhost-web` SPA
+	handle {
+		root * /site/selfhost-web
+		file_server
+		try_files {path} /
+	}
+}

aio.Caddyfile

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

aio_run.mjs

@@ -49,7 +49,8 @@ execSync(`npx import-meta-env -x build.env -e build.env -p "/site/**/*"`)
 
 fs.rmSync("build.env")
 
-const caddyProcess = runChildProcessWithPrefix("caddy", ["run", "--config", "/etc/caddy/Caddyfile", "--adapter", "caddyfile"], "App/Admin Dashboard Caddy")
+const caddyFileName = process.env.ENABLE_SUBPATH_BASED_ACCESS === 'true' ? 'aio-subpath-access.Caddyfile' : 'aio-multiport-setup.Caddyfile'
+const caddyProcess = runChildProcessWithPrefix("caddy", ["run", "--config", `/etc/caddy/${caddyFileName}`, "--adapter", "caddyfile"], "App/Admin Dashboard Caddy")
 const backendProcess = runChildProcessWithPrefix("pnpm", ["run", "start:prod"], "Backend Server")
 
 caddyProcess.on("exit", (code) => {

docker-compose.yml

@@ -17,7 +17,7 @@ services:
     environment:
       # Edit the below line to match your PostgresDB URL if you have an outside DB (make sure to update the .env file as well)
       - DATABASE_URL=postgresql://postgres:testpass@hoppscotch-db:5432/hoppscotch?connect_timeout=300
-      - PORT=3170
+      - PORT=8080
     volumes:
       # Uncomment the line below when modifying code. Only applicable when using the "dev" target.
       # - ./packages/hoppscotch-backend/:/usr/src/app
@@ -26,6 +26,7 @@ services:
       hoppscotch-db:
         condition: service_healthy
     ports:
+      - "3180:80"
       - "3170:3170"
 
   # The main hoppscotch app. This will be hosted at port 3000
@@ -42,7 +43,8 @@ services:
     depends_on:
       - hoppscotch-backend
     ports:
-      - "3000:8080"
+      - "3080:80"
+      - "3000:3000"
 
   # The Self Host dashboard for managing the app. This will be hosted at port 3100
   # NOTE: To do TLS or play around with how the app is hosted, you can look into the Caddyfile for
@@ -58,7 +60,8 @@ services:
     depends_on:
       - hoppscotch-backend
     ports:
-      - "3100:8080"
+      - "3280:80"
+      - "3100:3100"
 
   # The service that spins up all 3 services at once in one container
   hoppscotch-aio:
@@ -76,6 +79,7 @@ services:
       - "3000:3000"
       - "3100:3100"
       - "3170:3170"
+      - "3080:80"
 
   # The preset DB service, you can delete/comment the below lines if
   # you are using an external postgres instance

package.json

@@ -22,18 +22,19 @@
   "workspaces": [
     "./packages/*"
   ],
-  "dependencies": {
-    "husky": "^7.0.4",
-    "lint-staged": "^12.3.8"
-  },
   "devDependencies": {
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
-    "@types/node": "^17.0.24",
+    "@types/node": "17.0.27",
     "cross-env": "^7.0.3",
-    "http-server": "^14.1.1"
+    "http-server": "^14.1.1",
+    "husky": "^7.0.4",
+    "lint-staged": "12.4.0"
   },
   "pnpm": {
+    "overrides": {
+      "vue": "3.3.9"
+    },
     "packageExtensions": {
       "httpsnippet@^3.0.1": {
         "peerDependencies": {

packages/codemirror-lang-graphql/package.json

@@ -17,16 +17,16 @@
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@codemirror/language": "^6.9.0",
-    "@lezer/highlight": "^1.1.6",
-    "@lezer/lr": "^1.3.10"
+    "@codemirror/language": "6.9.0",
+    "@lezer/highlight": "1.1.4",
+    "@lezer/lr": "^1.3.13"
   },
   "devDependencies": {
-    "@lezer/generator": "^1.5.0",
+    "@lezer/generator": "^1.5.1",
     "mocha": "^9.2.2",
-    "rollup": "^2.70.2",
-    "rollup-plugin-dts": "^4.2.1",
-    "rollup-plugin-ts": "^2.0.7",
-    "typescript": "^4.6.3"
+    "rollup": "^3.29.3",
+    "rollup-plugin-dts": "^6.0.2",
+    "rollup-plugin-ts": "^3.4.5",
+    "typescript": "^5.2.2"
   }
 }

packages/hoppscotch-backend/backend.Caddyfile

@@ -0,0 +1,3 @@
+:80 :3170 {
+	reverse_proxy localhost:8080
+}

packages/hoppscotch-backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoppscotch-backend",
-  "version": "2023.8.1",
+  "version": "2023.8.4-1",
   "description": "",
   "author": "",
   "private": true,
@@ -24,18 +24,17 @@
     "do-test": "pnpm run test"
   },
   "dependencies": {
-    "@nestjs-modules/mailer": "^1.8.1",
-    "@nestjs/apollo": "^10.1.6",
-    "@nestjs/common": "^9.2.1",
-    "@nestjs/core": "^9.2.1",
-    "@nestjs/graphql": "^10.1.6",
-    "@nestjs/jwt": "^10.0.1",
-    "@nestjs/passport": "^9.0.0",
-    "@nestjs/platform-express": "^9.2.1",
-    "@nestjs/throttler": "^4.0.0",
+    "@apollo/server": "^4.9.4",
+    "@nestjs-modules/mailer": "^1.9.1",
+    "@nestjs/apollo": "^12.0.9",
+    "@nestjs/common": "^10.2.6",
+    "@nestjs/core": "^10.2.6",
+    "@nestjs/graphql": "^12.0.9",
+    "@nestjs/jwt": "^10.1.1",
+    "@nestjs/passport": "^10.0.2",
+    "@nestjs/platform-express": "^10.2.6",
+    "@nestjs/throttler": "^5.0.0",
     "@prisma/client": "^4.16.2",
-    "apollo-server-express": "^3.11.1",
-    "apollo-server-plugin-base": "^3.7.1",
     "argon2": "^0.30.3",
     "bcrypt": "^5.1.0",
     "cookie": "^0.5.0",
@@ -43,9 +42,9 @@
     "express": "^4.17.1",
     "express-session": "^1.17.3",
     "fp-ts": "^2.13.1",
-    "graphql": "^15.5.0",
+    "graphql": "^16.8.1",
     "graphql-query-complexity": "^0.12.0",
-    "graphql-redis-subscriptions": "^2.5.0",
+    "graphql-redis-subscriptions": "^2.6.0",
     "graphql-subscriptions": "^2.0.0",
     "handlebars": "^4.7.7",
     "io-ts": "^2.2.16",
@@ -63,9 +62,9 @@
     "rxjs": "^7.6.0"
   },
   "devDependencies": {
-    "@nestjs/cli": "^9.1.5",
-    "@nestjs/schematics": "^9.0.3",
-    "@nestjs/testing": "^9.2.1",
+    "@nestjs/cli": "^10.1.18",
+    "@nestjs/schematics": "^10.0.2",
+    "@nestjs/testing": "^10.2.6",
     "@relmify/jest-fp-ts": "^2.0.2",
     "@types/argon2": "^0.15.0",
     "@types/bcrypt": "^5.0.0",

packages/hoppscotch-backend/prisma/migrations/20231106120154_embeds_addition/migration.sql

@@ -0,0 +1,15 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[id]` on the table `Shortcode` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- AlterTable
+ALTER TABLE "Shortcode" ADD COLUMN     "embedProperties" JSONB,
+ADD COLUMN     "updatedOn" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Shortcode_id_key" ON "Shortcode"("id");
+
+-- AddForeignKey
+ALTER TABLE "Shortcode" ADD CONSTRAINT "Shortcode_creatorUid_fkey" FOREIGN KEY ("creatorUid") REFERENCES "User"("uid") ON DELETE SET NULL ON UPDATE CASCADE;

packages/hoppscotch-backend/prisma/migrations/20231130082054_collection_headers/migration.sql

@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "TeamCollection" ADD COLUMN     "data" JSONB;
+
+-- AlterTable
+ALTER TABLE "UserCollection" ADD COLUMN     "data" JSONB;

packages/hoppscotch-backend/prisma/schema.prisma

@@ -43,6 +43,7 @@ model TeamInvitation {
 model TeamCollection {
   id         String           @id @default(cuid())
   parentID   String?
+  data       Json?
   parent     TeamCollection?  @relation("TeamCollectionChildParent", fields: [parentID], references: [id])
   children   TeamCollection[] @relation("TeamCollectionChildParent")
   requests   TeamRequest[]
@@ -68,10 +69,13 @@ model TeamRequest {
 }
 
 model Shortcode {
-  id         String   @id
-  request    Json
-  creatorUid String?
-  createdOn  DateTime @default(now())
+  id              String   @id @unique
+  request         Json
+  embedProperties Json?
+  creatorUid      String?
+  User            User?    @relation(fields: [creatorUid], references: [uid])
+  createdOn       DateTime @default(now())
+  updatedOn       DateTime @default(now()) @updatedAt
 
   @@unique(fields: [id, creatorUid], name: "creator_uid_shortcode_unique")
 }
@@ -102,6 +106,7 @@ model User {
   currentGQLSession  Json?
   createdOn          DateTime            @default(now()) @db.Timestamp(3)
   invitedUsers       InvitedUsers[]
+  shortcodes         Shortcode[]
 }
 
 model Account {
@@ -192,6 +197,7 @@ model UserCollection {
   userUid    String
   user       User             @relation(fields: [userUid], references: [uid], onDelete: Cascade)
   title      String
+  data       Json?
   orderIndex Int
   type       ReqType
   createdOn  DateTime         @default(now()) @db.Timestamp(3)

packages/hoppscotch-backend/prod_run.mjs

@@ -0,0 +1,66 @@
+#!/usr/local/bin/node
+// @ts-check
+
+import { spawn } from 'child_process';
+import process from 'process';
+
+function runChildProcessWithPrefix(command, args, prefix) {
+  const childProcess = spawn(command, args);
+
+  childProcess.stdout.on('data', (data) => {
+    const output = data.toString().trim().split('\n');
+    output.forEach((line) => {
+      console.log(`${prefix} | ${line}`);
+    });
+  });
+
+  childProcess.stderr.on('data', (data) => {
+    const error = data.toString().trim().split('\n');
+    error.forEach((line) => {
+      console.error(`${prefix} | ${line}`);
+    });
+  });
+
+  childProcess.on('close', (code) => {
+    console.log(`${prefix} Child process exited with code ${code}`);
+  });
+
+  childProcess.on('error', (stuff) => {
+    console.error('error');
+    console.error(stuff);
+  });
+
+  return childProcess;
+}
+
+const caddyProcess = runChildProcessWithPrefix(
+  'caddy',
+  ['run', '--config', '/etc/caddy/backend.Caddyfile', '--adapter', 'caddyfile'],
+  'App/Admin Dashboard Caddy',
+);
+const backendProcess = runChildProcessWithPrefix(
+  'pnpm',
+  ['run', 'start:prod'],
+  'Backend Server',
+);
+
+caddyProcess.on('exit', (code) => {
+  console.log(`Exiting process because Caddy Server exited with code ${code}`);
+  process.exit(code);
+});
+
+backendProcess.on('exit', (code) => {
+  console.log(
+    `Exiting process because Backend Server exited with code ${code}`,
+  );
+  process.exit(code);
+});
+
+process.on('SIGINT', () => {
+  console.log('SIGINT received, exiting...');
+
+  caddyProcess.kill('SIGINT');
+  backendProcess.kill('SIGINT');
+
+  process.exit(0);
+});

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

@@ -1,4 +1,9 @@
-import { ObjectType } from '@nestjs/graphql';
+import { ObjectType, OmitType } from '@nestjs/graphql';
+import { User } from 'src/user/user.model';
 
 @ObjectType()
-export class Admin {}
+export class Admin extends OmitType(User, [
+  'isAdmin',
+  'currentRESTSession',
+  'currentGQLSession',
+]) {}

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

@@ -10,6 +10,8 @@ import { TeamInvitationModule } from '../team-invitation/team-invitation.module'
 import { TeamEnvironmentsModule } from '../team-environments/team-environments.module';
 import { TeamCollectionModule } from '../team-collection/team-collection.module';
 import { TeamRequestModule } from '../team-request/team-request.module';
+import { InfraResolver } from './infra.resolver';
+import { ShortcodeModule } from 'src/shortcode/shortcode.module';
 
 @Module({
   imports: [
@@ -22,8 +24,9 @@ import { TeamRequestModule } from '../team-request/team-request.module';
     TeamEnvironmentsModule,
     TeamCollectionModule,
     TeamRequestModule,
+    ShortcodeModule,
   ],
-  providers: [AdminResolver, AdminService],
+  providers: [InfraResolver, AdminResolver, AdminService],
   exports: [AdminService],
 })
 export class AdminModule {}

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

@@ -21,15 +21,15 @@ import { InvitedUser } from './invited-user.model';
 import { GqlUser } from '../decorators/gql-user.decorator';
 import { PubSubService } from '../pubsub/pubsub.service';
 import { Team, TeamMember } from '../team/team.model';
-import { User } from '../user/user.model';
-import { TeamInvitation } from '../team-invitation/team-invitation.model';
-import { PaginationArgs } from '../types/input-types.args';
 import {
   AddUserToTeamArgs,
   ChangeUserRoleInTeamArgs,
 } from './input-types.args';
 import { GqlThrottlerGuard } from 'src/guards/gql-throttler.guard';
 import { SkipThrottle } from '@nestjs/throttler';
+import { User } from 'src/user/user.model';
+import { PaginationArgs } from 'src/types/input-types.args';
+import { TeamInvitation } from 'src/team-invitation/team-invitation.model';
 
 @UseGuards(GqlThrottlerGuard)
 @Resolver(() => Admin)
@@ -51,6 +51,7 @@ export class AdminResolver {
 
   @ResolveField(() => [User], {
     description: 'Returns a list of all admin users in infra',
+    deprecationReason: 'Use `infra` query instead',
   })
   @UseGuards(GqlAuthGuard, GqlAdminGuard)
   async admins() {
@@ -59,6 +60,7 @@ export class AdminResolver {
   }
   @ResolveField(() => User, {
     description: 'Returns a user info by UID',
+    deprecationReason: 'Use `infra` query instead',
   })
   @UseGuards(GqlAuthGuard, GqlAdminGuard)
   async userInfo(
@@ -76,6 +78,7 @@ export class AdminResolver {
 
   @ResolveField(() => [User], {
     description: 'Returns a list of all the users in infra',
+    deprecationReason: 'Use `infra` query instead',
   })
   @UseGuards(GqlAuthGuard, GqlAdminGuard)
   async allUsers(
@@ -88,6 +91,7 @@ export class AdminResolver {
 
   @ResolveField(() => [InvitedUser], {
     description: 'Returns a list of all the invited users',
+    deprecationReason: 'Use `infra` query instead',
   })
   async invitedUsers(@Parent() admin: Admin): Promise<InvitedUser[]> {
     const users = await this.adminService.fetchInvitedUsers();
@@ -96,6 +100,7 @@ export class AdminResolver {
 
   @ResolveField(() => [Team], {
     description: 'Returns a list of all the teams in the infra',
+    deprecationReason: 'Use `infra` query instead',
   })
   async allTeams(
     @Parent() admin: Admin,
@@ -106,6 +111,7 @@ export class AdminResolver {
   }
   @ResolveField(() => Team, {
     description: 'Returns a team info by ID when requested by Admin',
+    deprecationReason: 'Use `infra` query instead',
   })
   async teamInfo(
     @Parent() admin: Admin,
@@ -123,6 +129,7 @@ export class AdminResolver {
 
   @ResolveField(() => Number, {
     description: 'Return count of all the members in a team',
+    deprecationReason: 'Use `infra` query instead',
   })
   async membersCountInTeam(
     @Parent() admin: Admin,
@@ -140,6 +147,7 @@ export class AdminResolver {
 
   @ResolveField(() => Number, {
     description: 'Return count of all the stored collections in a team',
+    deprecationReason: 'Use `infra` query instead',
   })
   async collectionCountInTeam(
     @Parent() admin: Admin,
@@ -155,6 +163,7 @@ export class AdminResolver {
   }
   @ResolveField(() => Number, {
     description: 'Return count of all the stored requests in a team',
+    deprecationReason: 'Use `infra` query instead',
   })
   async requestCountInTeam(
     @Parent() admin: Admin,
@@ -171,6 +180,7 @@ export class AdminResolver {
 
   @ResolveField(() => Number, {
     description: 'Return count of all the stored environments in a team',
+    deprecationReason: 'Use `infra` query instead',
   })
   async environmentCountInTeam(
     @Parent() admin: Admin,
@@ -187,6 +197,7 @@ export class AdminResolver {
 
   @ResolveField(() => [TeamInvitation], {
     description: 'Return all the pending invitations in a team',
+    deprecationReason: 'Use `infra` query instead',
   })
   async pendingInvitationCountInTeam(
     @Parent() admin: Admin,
@@ -205,6 +216,7 @@ export class AdminResolver {
 
   @ResolveField(() => Number, {
     description: 'Return total number of Users in organization',
+    deprecationReason: 'Use `infra` query instead',
   })
   async usersCount() {
     return this.adminService.getUsersCount();
@@ -212,6 +224,7 @@ export class AdminResolver {
 
   @ResolveField(() => Number, {
     description: 'Return total number of Teams in organization',
+    deprecationReason: 'Use `infra` query instead',
   })
   async teamsCount() {
     return this.adminService.getTeamsCount();
@@ -219,6 +232,7 @@ export class AdminResolver {
 
   @ResolveField(() => Number, {
     description: 'Return total number of Team Collections in organization',
+    deprecationReason: 'Use `infra` query instead',
   })
   async teamCollectionsCount() {
     return this.adminService.getTeamCollectionsCount();
@@ -226,6 +240,7 @@ export class AdminResolver {
 
   @ResolveField(() => Number, {
     description: 'Return total number of Team Requests in organization',
+    deprecationReason: 'Use `infra` query instead',
   })
   async teamRequestsCount() {
     return this.adminService.getTeamRequestsCount();
@@ -428,6 +443,23 @@ export class AdminResolver {
     return true;
   }
 
+  @Mutation(() => Boolean, {
+    description: 'Revoke Shortcode by ID',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  async revokeShortcodeByAdmin(
+    @Args({
+      name: 'code',
+      description: 'The shortcode to delete',
+      type: () => ID,
+    })
+    code: string,
+  ): Promise<boolean> {
+    const res = await this.adminService.deleteShortcode(code);
+    if (E.isLeft(res)) throwErr(res.left);
+    return true;
+  }
+
   /* Subscriptions */
 
   @Subscription(() => InvitedUser, {

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

@@ -15,6 +15,7 @@ import {
   INVALID_EMAIL,
   USER_ALREADY_INVITED,
 } from '../errors';
+import { ShortcodeService } from 'src/shortcode/shortcode.service';
 
 const mockPrisma = mockDeep<PrismaService>();
 const mockPubSub = mockDeep<PubSubService>();
@@ -25,6 +26,7 @@ const mockTeamRequestService = mockDeep<TeamRequestService>();
 const mockTeamInvitationService = mockDeep<TeamInvitationService>();
 const mockTeamCollectionService = mockDeep<TeamCollectionService>();
 const mockMailerService = mockDeep<MailerService>();
+const mockShortcodeService = mockDeep<ShortcodeService>();
 
 const adminService = new AdminService(
   mockUserService,
@@ -36,6 +38,7 @@ const adminService = new AdminService(
   mockPubSub as any,
   mockPrisma as any,
   mockMailerService,
+  mockShortcodeService,
 );
 
 const invitedUsers: InvitedUsers[] = [

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

@@ -24,6 +24,7 @@ import { TeamRequestService } from '../team-request/team-request.service';
 import { TeamEnvironmentsService } from '../team-environments/team-environments.service';
 import { TeamInvitationService } from '../team-invitation/team-invitation.service';
 import { TeamMemberRole } from '../team/team.model';
+import { ShortcodeService } from 'src/shortcode/shortcode.service';
 
 @Injectable()
 export class AdminService {
@@ -37,6 +38,7 @@ export class AdminService {
     private readonly pubsub: PubSubService,
     private readonly prisma: PrismaService,
     private readonly mailerService: MailerService,
+    private readonly shortcodeService: ShortcodeService,
   ) {}
 
   /**
@@ -74,7 +76,7 @@ export class AdminService {
 
     try {
       await this.mailerService.sendUserInvitationEmail(inviteeEmail, {
-        template: 'code-your-own',
+        template: 'user-invitation',
         variables: {
           inviteeEmail: inviteeEmail,
           magicLink: `${process.env.VITE_BASE_URL}`,
@@ -432,4 +434,35 @@ export class AdminService {
 
     return E.right(teamInvite.right);
   }
+
+  /**
+   * Fetch all created ShortCodes
+   *
+   * @param args Pagination arguments
+   * @param userEmail User email
+   * @returns ShortcodeWithUserEmail
+   */
+  async fetchAllShortcodes(
+    cursorID: string,
+    take: number,
+    userEmail: string = null,
+  ) {
+    return this.shortcodeService.fetchAllShortcodes(
+      { cursor: cursorID, take },
+      userEmail,
+    );
+  }
+
+  /**
+   * Delete a Shortcode
+   *
+   * @param shortcodeID ID of Shortcode being deleted
+   * @returns Boolean on successful deletion
+   */
+  async deleteShortcode(shortcodeID: string) {
+    const result = await this.shortcodeService.deleteShortcode(shortcodeID);
+
+    if (E.isLeft(result)) return E.left(result.left);
+    return E.right(result.right);
+  }
 }

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

@@ -0,0 +1,10 @@
+import { Field, ObjectType } from '@nestjs/graphql';
+import { Admin } from './admin.model';
+
+@ObjectType()
+export class Infra {
+  @Field(() => Admin, {
+    description: 'Admin who executed the action',
+  })
+  executedBy: Admin;
+}

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

@@ -0,0 +1,225 @@
+import { UseGuards } from '@nestjs/common';
+import { Args, ID, Query, ResolveField, Resolver } from '@nestjs/graphql';
+import { GqlThrottlerGuard } from 'src/guards/gql-throttler.guard';
+import { Infra } from './infra.model';
+import { AdminService } from './admin.service';
+import { GqlAuthGuard } from 'src/guards/gql-auth.guard';
+import { GqlAdminGuard } from './guards/gql-admin.guard';
+import { User } from 'src/user/user.model';
+import { AuthUser } from 'src/types/AuthUser';
+import { throwErr } from 'src/utils';
+import * as E from 'fp-ts/Either';
+import { Admin } from './admin.model';
+import { PaginationArgs } from 'src/types/input-types.args';
+import { InvitedUser } from './invited-user.model';
+import { Team } from 'src/team/team.model';
+import { TeamInvitation } from 'src/team-invitation/team-invitation.model';
+import { GqlAdmin } from './decorators/gql-admin.decorator';
+import { ShortcodeWithUserEmail } from 'src/shortcode/shortcode.model';
+
+@UseGuards(GqlThrottlerGuard)
+@Resolver(() => Infra)
+export class InfraResolver {
+  constructor(private adminService: AdminService) {}
+
+  @Query(() => Infra, {
+    description: 'Fetch details of the Infrastructure',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  infra(@GqlAdmin() admin: Admin) {
+    const infra: Infra = { executedBy: admin };
+    return infra;
+  }
+
+  @ResolveField(() => [User], {
+    description: 'Returns a list of all admin users in infra',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  async admins() {
+    const admins = await this.adminService.fetchAdmins();
+    return admins;
+  }
+
+  @ResolveField(() => User, {
+    description: 'Returns a user info by UID',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  async userInfo(
+    @Args({
+      name: 'userUid',
+      type: () => ID,
+      description: 'The user UID',
+    })
+    userUid: string,
+  ): Promise<AuthUser> {
+    const user = await this.adminService.fetchUserInfo(userUid);
+    if (E.isLeft(user)) throwErr(user.left);
+    return user.right;
+  }
+
+  @ResolveField(() => [User], {
+    description: 'Returns a list of all the users in infra',
+  })
+  @UseGuards(GqlAuthGuard, GqlAdminGuard)
+  async allUsers(@Args() args: PaginationArgs): Promise<AuthUser[]> {
+    const users = await this.adminService.fetchUsers(args.cursor, args.take);
+    return users;
+  }
+
+  @ResolveField(() => [InvitedUser], {
+    description: 'Returns a list of all the invited users',
+  })
+  async invitedUsers(): Promise<InvitedUser[]> {
+    const users = await this.adminService.fetchInvitedUsers();
+    return users;
+  }
+
+  @ResolveField(() => [Team], {
+    description: 'Returns a list of all the teams in the infra',
+  })
+  async allTeams(@Args() args: PaginationArgs): Promise<Team[]> {
+    const teams = await this.adminService.fetchAllTeams(args.cursor, args.take);
+    return teams;
+  }
+
+  @ResolveField(() => Team, {
+    description: 'Returns a team info by ID when requested by Admin',
+  })
+  async teamInfo(
+    @Args({
+      name: 'teamID',
+      type: () => ID,
+      description: 'Team ID for which info to fetch',
+    })
+    teamID: string,
+  ): Promise<Team> {
+    const team = await this.adminService.getTeamInfo(teamID);
+    if (E.isLeft(team)) throwErr(team.left);
+    return team.right;
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return count of all the members in a team',
+  })
+  async membersCountInTeam(
+    @Args({
+      name: 'teamID',
+      type: () => ID,
+      description: 'Team ID for which team members to fetch',
+      nullable: false,
+    })
+    teamID: string,
+  ): Promise<number> {
+    const teamMembersCount = await this.adminService.membersCountInTeam(teamID);
+    return teamMembersCount;
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return count of all the stored collections in a team',
+  })
+  async collectionCountInTeam(
+    @Args({
+      name: 'teamID',
+      type: () => ID,
+      description: 'Team ID for which team members to fetch',
+    })
+    teamID: string,
+  ): Promise<number> {
+    const teamCollCount = await this.adminService.collectionCountInTeam(teamID);
+    return teamCollCount;
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return count of all the stored requests in a team',
+  })
+  async requestCountInTeam(
+    @Args({
+      name: 'teamID',
+      type: () => ID,
+      description: 'Team ID for which team members to fetch',
+    })
+    teamID: string,
+  ): Promise<number> {
+    const teamReqCount = await this.adminService.requestCountInTeam(teamID);
+    return teamReqCount;
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return count of all the stored environments in a team',
+  })
+  async environmentCountInTeam(
+    @Args({
+      name: 'teamID',
+      type: () => ID,
+      description: 'Team ID for which team members to fetch',
+    })
+    teamID: string,
+  ): Promise<number> {
+    const envsCount = await this.adminService.environmentCountInTeam(teamID);
+    return envsCount;
+  }
+
+  @ResolveField(() => [TeamInvitation], {
+    description: 'Return all the pending invitations in a team',
+  })
+  async pendingInvitationCountInTeam(
+    @Args({
+      name: 'teamID',
+      type: () => ID,
+      description: 'Team ID for which team members to fetch',
+    })
+    teamID: string,
+  ) {
+    const invitations = await this.adminService.pendingInvitationCountInTeam(
+      teamID,
+    );
+    return invitations;
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return total number of Users in organization',
+  })
+  async usersCount() {
+    return this.adminService.getUsersCount();
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return total number of Teams in organization',
+  })
+  async teamsCount() {
+    return this.adminService.getTeamsCount();
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return total number of Team Collections in organization',
+  })
+  async teamCollectionsCount() {
+    return this.adminService.getTeamCollectionsCount();
+  }
+
+  @ResolveField(() => Number, {
+    description: 'Return total number of Team Requests in organization',
+  })
+  async teamRequestsCount() {
+    return this.adminService.getTeamRequestsCount();
+  }
+
+  @ResolveField(() => [ShortcodeWithUserEmail], {
+    description: 'Returns a list of all the shortcodes in the infra',
+  })
+  async allShortcodes(
+    @Args() args: PaginationArgs,
+    @Args({
+      name: 'userEmail',
+      nullable: true,
+      description: 'Users email to filter shortcodes by',
+    })
+    userEmail: string,
+  ) {
+    return await this.adminService.fetchAllShortcodes(
+      args.cursor,
+      args.take,
+      userEmail,
+    );
+  }
+}

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

@@ -27,12 +27,7 @@ import { AppController } from './app.controller';
       buildSchemaOptions: {
         numberScalarMode: 'integer',
       },
-      cors: {
-        origin: process.env.WHITELISTED_ORIGINS.split(','),
-        credentials: true,
-      },
       playground: process.env.PRODUCTION !== 'true',
-      debug: process.env.PRODUCTION !== 'true',
       autoSchemaFile: true,
       installSubscriptionHandlers: true,
       subscriptions: {
@@ -62,10 +57,12 @@ import { AppController } from './app.controller';
       }),
       driver: ApolloDriver,
     }),
-    ThrottlerModule.forRoot({
-      ttl: +process.env.RATE_LIMIT_TTL,
-      limit: +process.env.RATE_LIMIT_MAX,
-    }),
+    ThrottlerModule.forRoot([
+      {
+        ttl: +process.env.RATE_LIMIT_TTL,
+        limit: +process.env.RATE_LIMIT_MAX,
+      },
+    ]),
     UserModule,
     AuthModule,
     AdminModule,

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

@@ -229,7 +229,7 @@ export class AuthService {
     }
 
     await this.mailerService.sendEmail(email, {
-      template: 'code-your-own',
+      template: 'user-invitation',
       variables: {
         inviteeEmail: email,
         magicLink: `${url}/enter?token=${generatedTokens.token}`,

packages/hoppscotch-backend/src/errors.ts

@@ -254,6 +254,13 @@ export const TEAM_COLL_INVALID_JSON = 'team_coll/invalid_json';
  */
 export const TEAM_NOT_OWNER = 'team_coll/team_not_owner' as const;
 
+/**
+ * The Team Collection data is not valid
+ * (TeamCollectionService)
+ */
+export const TEAM_COLL_DATA_INVALID =
+  'team_coll/team_coll_data_invalid' as const;
+
 /**
  * Tried to perform an action on a request that doesn't accept their member role level
  * (GqlRequestTeamMemberGuard)
@@ -318,18 +325,6 @@ export const TEAM_INVITATION_NOT_FOUND =
  */
 export const SHORTCODE_NOT_FOUND = 'shortcode/not_found' as const;
 
-/**
- * Invalid ShortCode format
- * (ShortcodeService)
- */
-export const SHORTCODE_INVALID_JSON = 'shortcode/invalid_json' as const;
-
-/**
- * ShortCode already exists in DB
- * (ShortcodeService)
- */
-export const SHORTCODE_ALREADY_EXISTS = 'shortcode/already_exists' as const;
-
 /**
  * Invalid or non-existent TEAM ENVIRONMENT ID
  * (TeamEnvironmentsService)
@@ -597,6 +592,13 @@ export const USER_COLL_REORDERING_FAILED =
 export const USER_COLL_SAME_NEXT_COLL =
   'user_coll/user_collection_and_next_user_collection_are_same' as const;
 
+/**
+ * The User Collection data is not valid
+ * (UserCollectionService)
+ */
+export const USER_COLL_DATA_INVALID =
+  'user_coll/user_coll_data_invalid' as const;
+
 /**
  * The User Collection does not belong to the logged-in user
  * (UserCollectionService)
@@ -621,3 +623,24 @@ export const MAILER_SMTP_URL_UNDEFINED = 'mailer/smtp_url_undefined' as const;
  */
 export const MAILER_FROM_ADDRESS_UNDEFINED =
   'mailer/from_address_undefined' as const;
+
+/**
+ * SharedRequest invalid request JSON format
+ * (ShortcodeService)
+ */
+export const SHORTCODE_INVALID_REQUEST_JSON =
+  'shortcode/request_invalid_format' as const;
+
+/**
+ * SharedRequest invalid properties JSON format
+ * (ShortcodeService)
+ */
+export const SHORTCODE_INVALID_PROPERTIES_JSON =
+  'shortcode/properties_invalid_format' as const;
+
+/**
+ * SharedRequest invalid properties not found
+ * (ShortcodeService)
+ */
+export const SHORTCODE_PROPERTIES_NOT_FOUND =
+  'shortcode/properties_not_found' as const;

packages/hoppscotch-backend/src/gql-schema.ts

@@ -27,6 +27,7 @@ import { UserRequestUserCollectionResolver } from './user-request/resolvers/user
 import { UserEnvsUserResolver } from './user-environment/user.resolver';
 import { UserHistoryUserResolver } from './user-history/user.resolver';
 import { UserSettingsUserResolver } from './user-settings/user.resolver';
+import { InfraResolver } from './admin/infra.resolver';
 
 /**
  * All the resolvers present in the application.
@@ -34,6 +35,7 @@ import { UserSettingsUserResolver } from './user-settings/user.resolver';
  * NOTE: This needs to be KEPT UP-TO-DATE to keep the schema accurate
  */
 const RESOLVERS = [
+  InfraResolver,
   AdminResolver,
   ShortcodeResolver,
   TeamResolver,
@@ -93,9 +95,7 @@ export async function emitGQLSchemaFile() {
       numberScalarMode: 'integer',
     });
 
-    const schemaString = printSchema(schema, {
-      commentDescriptions: true,
-    });
+    const schemaString = printSchema(schema);
 
     logger.log(`Writing schema to GQL_SCHEMA_EMIT_LOCATION (${destination})`);
 

packages/hoppscotch-backend/src/guards/throttler-behind-proxy.guard.ts

@@ -3,8 +3,7 @@ import { Injectable } from '@nestjs/common';
 
 @Injectable()
 export class ThrottlerBehindProxyGuard extends ThrottlerGuard {
-  protected getTracker(req: Record<string, any>): string {
+  protected async getTracker(req: Record<string, any>): Promise<string> {
     return req.ips.length ? req.ips[0] : req.ip; // individualize IP extraction to meet your own needs
-    // learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-For#directives
   }
 }

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

@@ -8,7 +8,7 @@ export type MailDescription = {
 };
 
 export type UserMagicLinkMailDescription = {
-  template: 'code-your-own';
+  template: 'user-invitation';
   variables: {
     inviteeEmail: string;
     magicLink: string;
@@ -16,7 +16,7 @@ export type UserMagicLinkMailDescription = {
 };
 
 export type AdminUserInvitationMailDescription = {
-  template: 'code-your-own';
+  template: 'user-invitation';
   variables: {
     inviteeEmail: string;
     magicLink: string;

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

@@ -27,7 +27,7 @@ export class MailerService {
       case 'team-invitation':
         return `${mailDesc.variables.invitee} invited you to join ${mailDesc.variables.invite_team_name} in Hoppscotch`;
 
-      case 'code-your-own':
+      case 'user-invitation':
         return 'Sign in to Hoppscotch';
     }
   }

packages/hoppscotch-backend/src/mailer/templates/team-invitation.hbs

@@ -14,7 +14,7 @@
   -->
     <style type="text/css" rel="stylesheet" media="all">
     /* Base ------------------------------ */
-    
+
     @import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&display=swap");
     body {
       width: 100% !important;
@@ -22,19 +22,19 @@
       margin: 0;
       -webkit-text-size-adjust: none;
     }
-    
+
     a {
       color: #3869D4;
     }
-    
+
     a img {
       border: none;
     }
-    
+
     td {
       word-break: break-word;
     }
-    
+
     .preheader {
       display: none !important;
       visibility: hidden;
@@ -47,13 +47,13 @@
       overflow: hidden;
     }
     /* Type ------------------------------ */
-    
+
     body,
     td,
     th {
       font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
     }
-    
+
     h1 {
       margin-top: 0;
       color: #333333;
@@ -61,7 +61,7 @@
       font-weight: bold;
       text-align: left;
     }
-    
+
     h2 {
       margin-top: 0;
       color: #333333;
@@ -69,7 +69,7 @@
       font-weight: bold;
       text-align: left;
     }
-    
+
     h3 {
       margin-top: 0;
       color: #333333;
@@ -77,12 +77,12 @@
       font-weight: bold;
       text-align: left;
     }
-    
+
     td,
     th {
       font-size: 16px;
     }
-    
+
     p,
     ul,
     ol,
@@ -91,25 +91,25 @@
       font-size: 16px;
       line-height: 1.625;
     }
-    
+
     p.sub {
       font-size: 13px;
     }
     /* Utilities ------------------------------ */
-    
+
     .align-right {
       text-align: right;
     }
-    
+
     .align-left {
       text-align: left;
     }
-    
+
     .align-center {
       text-align: center;
     }
     /* Buttons ------------------------------ */
-    
+
     .button {
       background-color: #3869D4;
       border-top: 10px solid #3869D4;
@@ -124,7 +124,7 @@
       -webkit-text-size-adjust: none;
       box-sizing: border-box;
     }
-    
+
     .button--green {
       background-color: #22BC66;
       border-top: 10px solid #22BC66;
@@ -132,7 +132,7 @@
       border-bottom: 10px solid #22BC66;
       border-left: 18px solid #22BC66;
     }
-    
+
     .button--red {
       background-color: #FF6136;
       border-top: 10px solid #FF6136;
@@ -140,7 +140,7 @@
       border-bottom: 10px solid #FF6136;
       border-left: 18px solid #FF6136;
     }
-    
+
     @media only screen and (max-width: 500px) {
       .button {
         width: 100% !important;
@@ -148,21 +148,21 @@
       }
     }
     /* Attribute list ------------------------------ */
-    
+
     .attributes {
       margin: 0 0 21px;
     }
-    
+
     .attributes_content {
       background-color: #F4F4F7;
       padding: 16px;
     }
-    
+
     .attributes_item {
       padding: 0;
     }
     /* Related Items ------------------------------ */
-    
+
     .related {
       width: 100%;
       margin: 0;
@@ -171,31 +171,31 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-    
+
     .related_item {
       padding: 10px 0;
       color: #CBCCCF;
       font-size: 15px;
       line-height: 18px;
     }
-    
+
     .related_item-title {
       display: block;
       margin: .5em 0 0;
     }
-    
+
     .related_item-thumb {
       display: block;
       padding-bottom: 10px;
     }
-    
+
     .related_heading {
       border-top: 1px solid #CBCCCF;
       text-align: center;
       padding: 25px 0 10px;
     }
     /* Discount Code ------------------------------ */
-    
+
     .discount {
       width: 100%;
       margin: 0;
@@ -206,33 +206,33 @@
       background-color: #F4F4F7;
       border: 2px dashed #CBCCCF;
     }
-    
+
     .discount_heading {
       text-align: center;
     }
-    
+
     .discount_body {
       text-align: center;
       font-size: 15px;
     }
     /* Social Icons ------------------------------ */
-    
+
     .social {
       width: auto;
     }
-    
+
     .social td {
       padding: 0;
       width: auto;
     }
-    
+
     .social_icon {
       height: 20px;
       margin: 0 8px 10px 8px;
       padding: 0;
     }
     /* Data table ------------------------------ */
-    
+
     .purchase {
       width: 100%;
       margin: 0;
@@ -241,7 +241,7 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-    
+
     .purchase_content {
       width: 100%;
       margin: 0;
@@ -250,50 +250,50 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-    
+
     .purchase_item {
       padding: 10px 0;
       color: #51545E;
       font-size: 15px;
       line-height: 18px;
     }
-    
+
     .purchase_heading {
       padding-bottom: 8px;
       border-bottom: 1px solid #EAEAEC;
     }
-    
+
     .purchase_heading p {
       margin: 0;
       color: #85878E;
       font-size: 12px;
     }
-    
+
     .purchase_footer {
       padding-top: 15px;
       border-top: 1px solid #EAEAEC;
     }
-    
+
     .purchase_total {
       margin: 0;
       text-align: right;
       font-weight: bold;
       color: #333333;
     }
-    
+
     .purchase_total--label {
       padding: 0 15px 0 0;
     }
-    
+
     body {
       background-color: #F2F4F6;
       color: #51545E;
     }
-    
+
     p {
       color: #51545E;
     }
-    
+
     .email-wrapper {
       width: 100%;
       margin: 0;
@@ -303,7 +303,7 @@
       -premailer-cellspacing: 0;
       background-color: #F2F4F6;
     }
-    
+
     .email-content {
       width: 100%;
       margin: 0;
@@ -313,16 +313,16 @@
       -premailer-cellspacing: 0;
     }
     /* Masthead ----------------------- */
-    
+
     .email-masthead {
       padding: 25px 0;
       text-align: center;
     }
-    
+
     .email-masthead_logo {
       width: 94px;
     }
-    
+
     .email-masthead_name {
       font-size: 16px;
       font-weight: bold;
@@ -331,7 +331,7 @@
       text-shadow: 0 1px 0 white;
     }
     /* Body ------------------------------ */
-    
+
     .email-body {
       width: 100%;
       margin: 0;
@@ -340,7 +340,7 @@
       -premailer-cellpadding: 0;
       -premailer-cellspacing: 0;
     }
-    
+
     .email-body_inner {
       width: 570px;
       margin: 0 auto;
@@ -350,7 +350,7 @@
       -premailer-cellspacing: 0;
       background-color: #FFFFFF;
     }
-    
+
     .email-footer {
       width: 570px;
       margin: 0 auto;
@@ -360,11 +360,11 @@
       -premailer-cellspacing: 0;
       text-align: center;
     }
-    
+
     .email-footer p {
       color: #A8AAAF;
     }
-    
+
     .body-action {
       width: 100%;
       margin: 30px auto;
@@ -374,25 +374,25 @@
       -premailer-cellspacing: 0;
       text-align: center;
     }
-    
+
     .body-sub {
       margin-top: 25px;
       padding-top: 25px;
       border-top: 1px solid #EAEAEC;
     }
-    
+
     .content-cell {
       padding: 45px;
     }
     /*Media Queries ------------------------------ */
-    
+
     @media only screen and (max-width: 600px) {
       .email-body_inner,
       .email-footer {
         width: 100% !important;
       }
     }
-    
+
     @media (prefers-color-scheme: dark) {
       body,
       .email-body,

packages/hoppscotch-backend/src/plugins/GQLComplexityPlugin.ts

@@ -1,8 +1,9 @@
 import { GraphQLSchemaHost } from '@nestjs/graphql';
 import {
   ApolloServerPlugin,
+  BaseContext,
   GraphQLRequestListener,
-} from 'apollo-server-plugin-base';
+} from '@apollo/server';
 import { Plugin } from '@nestjs/apollo';
 import { GraphQLError } from 'graphql';
 import {
@@ -17,7 +18,7 @@ const COMPLEXITY_LIMIT = 50;
 export class GQLComplexityPlugin implements ApolloServerPlugin {
   constructor(private gqlSchemaHost: GraphQLSchemaHost) {}
 
-  async requestDidStart(): Promise<GraphQLRequestListener> {
+  async requestDidStart(): Promise<GraphQLRequestListener<BaseContext>> {
     const { schema } = this.gqlSchemaHost;
 
     return {

packages/hoppscotch-backend/src/pubsub/topicsDefs.ts

@@ -21,8 +21,8 @@ import {
 } from 'src/team-request/team-request.model';
 import { TeamInvitation } from 'src/team-invitation/team-invitation.model';
 import { InvitedUser } from '../admin/invited-user.model';
-import { UserCollection } from '@prisma/client';
 import {
+  UserCollection,
   UserCollectionRemovedData,
   UserCollectionReorderData,
 } from 'src/user-collection/user-collections.model';
@@ -69,5 +69,7 @@ export type TopicDef = {
   [topic: `team_req/${string}/req_deleted`]: string;
   [topic: `team/${string}/invite_added`]: TeamInvitation;
   [topic: `team/${string}/invite_removed`]: string;
-  [topic: `shortcode/${string}/${'created' | 'revoked'}`]: Shortcode;
+  [
+    topic: `shortcode/${string}/${'created' | 'revoked' | 'updated'}`
+  ]: Shortcode;
 };

packages/hoppscotch-backend/src/shortcode/shortcode.model.ts

@@ -1,9 +1,10 @@
 import { Field, ID, ObjectType } from '@nestjs/graphql';
+import { User } from 'src/user/user.model';
 
 @ObjectType()
 export class Shortcode {
   @Field(() => ID, {
-    description: 'The shortcode. 12 digit alphanumeric.',
+    description: 'The 12 digit alphanumeric code',
   })
   id: string;
 
@@ -12,8 +13,57 @@ export class Shortcode {
   })
   request: string;
 
+  @Field({
+    description: 'JSON string representing the properties for an embed',
+    nullable: true,
+  })
+  properties: string;
+
   @Field({
     description: 'Timestamp of when the Shortcode was created',
   })
   createdOn: Date;
 }
+
+@ObjectType()
+export class ShortcodeCreator {
+  @Field({
+    description: 'Uid of user who created the shortcode',
+  })
+  uid: string;
+
+  @Field({
+    description: 'Email of user who created the shortcode',
+  })
+  email: string;
+}
+
+@ObjectType()
+export class ShortcodeWithUserEmail {
+  @Field(() => ID, {
+    description: 'The 12 digit alphanumeric code',
+  })
+  id: string;
+
+  @Field({
+    description: 'JSON string representing the request data',
+  })
+  request: string;
+
+  @Field({
+    description: 'JSON string representing the properties for an embed',
+    nullable: true,
+  })
+  properties: string;
+
+  @Field({
+    description: 'Timestamp of when the Shortcode was created',
+  })
+  createdOn: Date;
+
+  @Field({
+    description: 'Details of user who created the shortcode',
+    nullable: true,
+  })
+  creator: ShortcodeCreator;
+}

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

@@ -1,5 +1,4 @@
 import { Module } from '@nestjs/common';
-import { JwtModule } from '@nestjs/jwt';
 import { PrismaModule } from 'src/prisma/prisma.module';
 import { PubSubModule } from 'src/pubsub/pubsub.module';
 import { UserModule } from 'src/user/user.module';
@@ -7,14 +6,7 @@ import { ShortcodeResolver } from './shortcode.resolver';
 import { ShortcodeService } from './shortcode.service';
 
 @Module({
-  imports: [
-    PrismaModule,
-    UserModule,
-    PubSubModule,
-    JwtModule.register({
-      secret: process.env.JWT_SECRET,
-    }),
-  ],
+  imports: [PrismaModule, UserModule, PubSubModule],
   providers: [ShortcodeService, ShortcodeResolver],
   exports: [ShortcodeService],
 })

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

@@ -1,6 +1,5 @@
 import {
   Args,
-  Context,
   ID,
   Mutation,
   Query,
@@ -9,28 +8,25 @@ import {
 } from '@nestjs/graphql';
 import * as E from 'fp-ts/Either';
 import { UseGuards } from '@nestjs/common';
-import { Shortcode } from './shortcode.model';
+import { Shortcode, ShortcodeWithUserEmail } from './shortcode.model';
 import { ShortcodeService } from './shortcode.service';
-import { UserService } from 'src/user/user.service';
 import { throwErr } from 'src/utils';
 import { GqlUser } from 'src/decorators/gql-user.decorator';
 import { GqlAuthGuard } from 'src/guards/gql-auth.guard';
 import { User } from 'src/user/user.model';
 import { PubSubService } from 'src/pubsub/pubsub.service';
 import { AuthUser } from '../types/AuthUser';
-import { JwtService } from '@nestjs/jwt';
 import { PaginationArgs } from 'src/types/input-types.args';
 import { GqlThrottlerGuard } from 'src/guards/gql-throttler.guard';
 import { SkipThrottle } from '@nestjs/throttler';
+import { GqlAdminGuard } from 'src/admin/guards/gql-admin.guard';
 
 @UseGuards(GqlThrottlerGuard)
 @Resolver(() => Shortcode)
 export class ShortcodeResolver {
   constructor(
     private readonly shortcodeService: ShortcodeService,
-    private readonly userService: UserService,
     private readonly pubsub: PubSubService,
-    private jwtService: JwtService,
   ) {}
 
   /* Queries */
@@ -64,20 +60,53 @@ export class ShortcodeResolver {
   @Mutation(() => Shortcode, {
     description: 'Create a shortcode for the given request.',
   })
+  @UseGuards(GqlAuthGuard)
   async createShortcode(
+    @GqlUser() user: AuthUser,
     @Args({
       name: 'request',
       description: 'JSON string of the request object',
     })
     request: string,
-    @Context() ctx: any,
+    @Args({
+      name: 'properties',
+      description: 'JSON string of the properties of the embed',
+      nullable: true,
+    })
+    properties: string,
   ) {
-    const decodedAccessToken = this.jwtService.verify(
-      ctx.req.cookies['access_token'],
-    );
     const result = await this.shortcodeService.createShortcode(
       request,
-      decodedAccessToken?.sub,
+      properties,
+      user,
+    );
+
+    if (E.isLeft(result)) throwErr(result.left);
+    return result.right;
+  }
+
+  @Mutation(() => Shortcode, {
+    description: 'Update a user generated Shortcode',
+  })
+  @UseGuards(GqlAuthGuard)
+  async updateEmbedProperties(
+    @GqlUser() user: AuthUser,
+    @Args({
+      name: 'code',
+      type: () => ID,
+      description: 'The Shortcode to update',
+    })
+    code: string,
+    @Args({
+      name: 'properties',
+      description: 'JSON string of the properties of the embed',
+    })
+    properties: string,
+  ) {
+    const result = await this.shortcodeService.updateEmbedProperties(
+      code,
+      user.uid,
+      properties,
     );
 
     if (E.isLeft(result)) throwErr(result.left);
@@ -93,7 +122,7 @@ export class ShortcodeResolver {
     @Args({
       name: 'code',
       type: () => ID,
-      description: 'The shortcode to resolve',
+      description: 'The shortcode to remove',
     })
     code: string,
   ) {
@@ -114,6 +143,16 @@ export class ShortcodeResolver {
     return this.pubsub.asyncIterator(`shortcode/${user.uid}/created`);
   }
 
+  @Subscription(() => Shortcode, {
+    description: 'Listen for Shortcode updates',
+    resolve: (value) => value,
+  })
+  @SkipThrottle()
+  @UseGuards(GqlAuthGuard)
+  myShortcodesUpdated(@GqlUser() user: AuthUser) {
+    return this.pubsub.asyncIterator(`shortcode/${user.uid}/updated`);
+  }
+
   @Subscription(() => Shortcode, {
     description: 'Listen for shortcode deletion',
     resolve: (value) => value,

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

@@ -1,13 +1,16 @@
 import { mockDeep, mockReset } from 'jest-mock-extended';
 import { PrismaService } from '../prisma/prisma.service';
 import {
-  SHORTCODE_ALREADY_EXISTS,
-  SHORTCODE_INVALID_JSON,
+  INVALID_EMAIL,
+  SHORTCODE_INVALID_PROPERTIES_JSON,
+  SHORTCODE_INVALID_REQUEST_JSON,
   SHORTCODE_NOT_FOUND,
+  SHORTCODE_PROPERTIES_NOT_FOUND,
 } from 'src/errors';
-import { Shortcode } from './shortcode.model';
+import { Shortcode, ShortcodeWithUserEmail } from './shortcode.model';
 import { ShortcodeService } from './shortcode.service';
 import { UserService } from 'src/user/user.service';
+import { AuthUser } from 'src/types/AuthUser';
 
 const mockPrisma = mockDeep<PrismaService>();
 
@@ -22,7 +25,7 @@ const mockFB = {
     doc: mockDocFunc,
   },
 };
-const mockUserService = new UserService(mockFB as any, mockPubSub as any);
+const mockUserService = new UserService(mockPrisma as any, mockPubSub as any);
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -38,18 +41,34 @@ beforeEach(() => {
 });
 const createdOn = new Date();
 
-const shortCodeWithOutUser = {
-  id: '123',
-  request: '{}',
+const user: AuthUser = {
+  uid: '123344',
+  email: 'dwight@dundermifflin.com',
+  displayName: 'Dwight Schrute',
+  photoURL: 'https://en.wikipedia.org/wiki/Dwight_Schrute',
+  isAdmin: false,
+  refreshToken: 'hbfvdkhjbvkdvdfjvbnkhjb',
   createdOn: createdOn,
-  creatorUid: null,
+  currentGQLSession: {},
+  currentRESTSession: {},
 };
 
-const shortCodeWithUser = {
+const mockEmbed = {
   id: '123',
   request: '{}',
+  embedProperties: '{}',
   createdOn: createdOn,
-  creatorUid: 'user_uid_1',
+  creatorUid: user.uid,
+  updatedOn: createdOn,
+};
+
+const mockShortcode = {
+  id: '123',
+  request: '{}',
+  embedProperties: null,
+  createdOn: createdOn,
+  creatorUid: user.uid,
+  updatedOn: createdOn,
 };
 
 const shortcodes = [
@@ -58,33 +77,67 @@ const shortcodes = [
     request: {
       hello: 'there',
     },
-    creatorUid: 'testuser',
+    embedProperties: {
+      foo: 'bar',
+    },
+    creatorUid: user.uid,
     createdOn: new Date(),
+    updatedOn: createdOn,
   },
   {
     id: 'blablabla1',
     request: {
       hello: 'there',
     },
-    creatorUid: 'testuser',
+    embedProperties: {
+      foo: 'bar',
+    },
+    creatorUid: user.uid,
     createdOn: new Date(),
+    updatedOn: createdOn,
+  },
+];
+
+const shortcodesWithUserEmail = [
+  {
+    id: 'blablabla',
+    request: {
+      hello: 'there',
+    },
+    embedProperties: {
+      foo: 'bar',
+    },
+    creatorUid: user.uid,
+    createdOn: new Date(),
+    updatedOn: createdOn,
+    User: user,
+  },
+  {
+    id: 'blablabla1',
+    request: {
+      hello: 'there',
+    },
+    embedProperties: {
+      foo: 'bar',
+    },
+    creatorUid: user.uid,
+    createdOn: new Date(),
+    updatedOn: createdOn,
+    User: user,
   },
 ];
 
 describe('ShortcodeService', () => {
   describe('getShortCode', () => {
-    test('should return a valid shortcode with valid shortcode ID', async () => {
-      mockPrisma.shortcode.findFirstOrThrow.mockResolvedValueOnce(
-        shortCodeWithOutUser,
-      );
+    test('should return a valid Shortcode with valid Shortcode ID', async () => {
+      mockPrisma.shortcode.findFirstOrThrow.mockResolvedValueOnce(mockEmbed);
 
-      const result = await shortcodeService.getShortCode(
-        shortCodeWithOutUser.id,
-      );
+      const result = await shortcodeService.getShortCode(mockEmbed.id);
       expect(result).toEqualRight(<Shortcode>{
-        id: shortCodeWithOutUser.id,
-        createdOn: shortCodeWithOutUser.createdOn,
-        request: JSON.stringify(shortCodeWithOutUser.request),
+        id: mockEmbed.id,
+        createdOn: mockEmbed.createdOn,
+        request: JSON.stringify(mockEmbed.request),
+        properties: JSON.stringify(mockEmbed.embedProperties),
       });
     });
 
@@ -99,10 +152,10 @@ describe('ShortcodeService', () => {
   });
 
   describe('fetchUserShortCodes', () => {
-    test('should return list of shortcodes with valid inputs and no cursor', async () => {
+    test('should return list of Shortcode with valid inputs and no cursor', async () => {
       mockPrisma.shortcode.findMany.mockResolvedValueOnce(shortcodes);
 
-      const result = await shortcodeService.fetchUserShortCodes('testuser', {
+      const result = await shortcodeService.fetchUserShortCodes(user.uid, {
         cursor: null,
         take: 10,
       });
@@ -110,20 +163,22 @@ describe('ShortcodeService', () => {
         {
           id: shortcodes[0].id,
           request: JSON.stringify(shortcodes[0].request),
+          properties: JSON.stringify(shortcodes[0].embedProperties),
           createdOn: shortcodes[0].createdOn,
         },
         {
           id: shortcodes[1].id,
           request: JSON.stringify(shortcodes[1].request),
+          properties: JSON.stringify(shortcodes[1].embedProperties),
           createdOn: shortcodes[1].createdOn,
         },
       ]);
     });
 
-    test('should return list of shortcodes with valid inputs and cursor', async () => {
+    test('should return list of Shortcode with valid inputs and cursor', async () => {
       mockPrisma.shortcode.findMany.mockResolvedValue([shortcodes[1]]);
 
-      const result = await shortcodeService.fetchUserShortCodes('testuser', {
+      const result = await shortcodeService.fetchUserShortCodes(user.uid, {
         cursor: 'blablabla',
         take: 10,
       });
@@ -131,6 +186,7 @@ describe('ShortcodeService', () => {
         {
           id: shortcodes[1].id,
           request: JSON.stringify(shortcodes[1].request),
+          properties: JSON.stringify(shortcodes[1].embedProperties),
           createdOn: shortcodes[1].createdOn,
         },
       ]);
@@ -139,7 +195,7 @@ describe('ShortcodeService', () => {
     test('should return an empty array for an invalid cursor', async () => {
       mockPrisma.shortcode.findMany.mockResolvedValue([]);
 
-      const result = await shortcodeService.fetchUserShortCodes('testuser', {
+      const result = await shortcodeService.fetchUserShortCodes(user.uid, {
         cursor: 'invalidcursor',
         take: 10,
       });
@@ -171,77 +227,111 @@ describe('ShortcodeService', () => {
   });
 
   describe('createShortcode', () => {
-    test('should throw SHORTCODE_INVALID_JSON error if incoming request data is invalid', async () => {
+    test('should throw SHORTCODE_INVALID_REQUEST_JSON error if incoming request data is invalid', async () => {
       const result = await shortcodeService.createShortcode(
         'invalidRequest',
-        'user_uid_1',
+        null,
+        user,
       );
-      expect(result).toEqualLeft(SHORTCODE_INVALID_JSON);
+      expect(result).toEqualLeft(SHORTCODE_INVALID_REQUEST_JSON);
     });
 
-    test('should successfully create a new shortcode with valid user uid', async () => {
-      // generateUniqueShortCodeID --> getShortCode
+    test('should throw SHORTCODE_INVALID_PROPERTIES_JSON error if incoming properties data is invalid', async () => {
+      const result = await shortcodeService.createShortcode(
+        '{}',
+        'invalid_data',
+        user,
+      );
+      expect(result).toEqualLeft(SHORTCODE_INVALID_PROPERTIES_JSON);
+    });
+
+    test('should successfully create a new Embed with valid user uid', async () => {
+      // generateUniqueShortCodeID --> getShortcode
       mockPrisma.shortcode.findFirstOrThrow.mockRejectedValueOnce(
         'NotFoundError',
       );
-      mockPrisma.shortcode.create.mockResolvedValueOnce(shortCodeWithUser);
+      mockPrisma.shortcode.create.mockResolvedValueOnce(mockEmbed);
 
-      const result = await shortcodeService.createShortcode('{}', 'user_uid_1');
-      expect(result).toEqualRight({
-        id: shortCodeWithUser.id,
-        createdOn: shortCodeWithUser.createdOn,
-        request: JSON.stringify(shortCodeWithUser.request),
+      const result = await shortcodeService.createShortcode('{}', '{}', user);
+      expect(result).toEqualRight(<Shortcode>{
+        id: mockEmbed.id,
+        createdOn: mockEmbed.createdOn,
+        request: JSON.stringify(mockEmbed.request),
+        properties: JSON.stringify(mockEmbed.embedProperties),
       });
     });
 
-    test('should successfully create a new shortcode with null user uid', async () => {
-      // generateUniqueShortCodeID --> getShortCode
+    test('should successfully create a new ShortCode with valid user uid', async () => {
+      // generateUniqueShortCodeID --> getShortcode
       mockPrisma.shortcode.findFirstOrThrow.mockRejectedValueOnce(
         'NotFoundError',
       );
-      mockPrisma.shortcode.create.mockResolvedValueOnce(shortCodeWithUser);
+      mockPrisma.shortcode.create.mockResolvedValueOnce(mockShortcode);
 
-      const result = await shortcodeService.createShortcode('{}', null);
-      expect(result).toEqualRight({
-        id: shortCodeWithUser.id,
-        createdOn: shortCodeWithUser.createdOn,
-        request: JSON.stringify(shortCodeWithOutUser.request),
+      const result = await shortcodeService.createShortcode('{}', null, user);
+      expect(result).toEqualRight(<Shortcode>{
+        id: mockShortcode.id,
+        createdOn: mockShortcode.createdOn,
+        request: JSON.stringify(mockShortcode.request),
+        properties: mockShortcode.embedProperties,
       });
     });
 
-    test('should send pubsub message to `shortcode/{uid}/created` on successful creation of shortcode', async () => {
-      // generateUniqueShortCodeID --> getShortCode
+    test('should send pubsub message to `shortcode/{uid}/created` on successful creation of a Shortcode', async () => {
+      // generateUniqueShortCodeID --> getShortcode
       mockPrisma.shortcode.findFirstOrThrow.mockRejectedValueOnce(
         'NotFoundError',
       );
-      mockPrisma.shortcode.create.mockResolvedValueOnce(shortCodeWithUser);
+      mockPrisma.shortcode.create.mockResolvedValueOnce(mockShortcode);
+
+      const result = await shortcodeService.createShortcode('{}', null, user);
 
-      const result = await shortcodeService.createShortcode('{}', 'user_uid_1');
       expect(mockPubSub.publish).toHaveBeenCalledWith(
-        `shortcode/${shortCodeWithUser.creatorUid}/created`,
-        {
-          id: shortCodeWithUser.id,
-          createdOn: shortCodeWithUser.createdOn,
-          request: JSON.stringify(shortCodeWithUser.request),
+        `shortcode/${mockShortcode.creatorUid}/created`,
+        <Shortcode>{
+          id: mockShortcode.id,
+          createdOn: mockShortcode.createdOn,
+          request: JSON.stringify(mockShortcode.request),
+          properties: mockShortcode.embedProperties,
+        },
+      );
+    });
+
+    test('should send pubsub message to `shortcode/{uid}/created` on successful creation of an Embed', async () => {
+      // generateUniqueShortCodeID --> getShortcode
+      mockPrisma.shortcode.findFirstOrThrow.mockRejectedValueOnce(
+        'NotFoundError',
+      );
+      mockPrisma.shortcode.create.mockResolvedValueOnce(mockEmbed);
+
+      const result = await shortcodeService.createShortcode('{}', '{}', user);
+
+      expect(mockPubSub.publish).toHaveBeenCalledWith(
+        `shortcode/${mockEmbed.creatorUid}/created`,
+        <Shortcode>{
+          id: mockEmbed.id,
+          createdOn: mockEmbed.createdOn,
+          request: JSON.stringify(mockEmbed.request),
+          properties: JSON.stringify(mockEmbed.embedProperties),
         },
       );
     });
   });
 
   describe('revokeShortCode', () => {
-    test('should return true on successful deletion of shortcode with valid inputs', async () => {
-      mockPrisma.shortcode.delete.mockResolvedValueOnce(shortCodeWithUser);
+    test('should return true on successful deletion of Shortcode with valid inputs', async () => {
+      mockPrisma.shortcode.delete.mockResolvedValueOnce(mockEmbed);
 
       const result = await shortcodeService.revokeShortCode(
-        shortCodeWithUser.id,
-        shortCodeWithUser.creatorUid,
+        mockEmbed.id,
+        mockEmbed.creatorUid,
       );
 
       expect(mockPrisma.shortcode.delete).toHaveBeenCalledWith({
         where: {
           creator_uid_shortcode_unique: {
-            creatorUid: shortCodeWithUser.creatorUid,
-            id: shortCodeWithUser.id,
+            creatorUid: mockEmbed.creatorUid,
+            id: mockEmbed.id,
           },
         },
       });
@@ -249,52 +339,53 @@ describe('ShortcodeService', () => {
       expect(result).toEqualRight(true);
     });
 
-    test('should return SHORTCODE_NOT_FOUND error when shortcode is invalid and user uid is valid', async () => {
+    test('should return SHORTCODE_NOT_FOUND error when Shortcode is invalid and user uid is valid', async () => {
       mockPrisma.shortcode.delete.mockRejectedValue('RecordNotFound');
       expect(
         shortcodeService.revokeShortCode('invalid', 'testuser'),
       ).resolves.toEqualLeft(SHORTCODE_NOT_FOUND);
     });
 
-    test('should return SHORTCODE_NOT_FOUND error when shortcode is valid and user uid is invalid', async () => {
+    test('should return SHORTCODE_NOT_FOUND error when Shortcode is valid and user uid is invalid', async () => {
       mockPrisma.shortcode.delete.mockRejectedValue('RecordNotFound');
       expect(
         shortcodeService.revokeShortCode('blablablabla', 'invalidUser'),
       ).resolves.toEqualLeft(SHORTCODE_NOT_FOUND);
     });
 
-    test('should return SHORTCODE_NOT_FOUND error when both shortcode and user uid are invalid', async () => {
+    test('should return SHORTCODE_NOT_FOUND error when both Shortcode and user uid are invalid', async () => {
       mockPrisma.shortcode.delete.mockRejectedValue('RecordNotFound');
       expect(
         shortcodeService.revokeShortCode('invalid', 'invalid'),
       ).resolves.toEqualLeft(SHORTCODE_NOT_FOUND);
     });
 
-    test('should send pubsub message to `shortcode/{uid}/revoked` on successful deletion of shortcode', async () => {
-      mockPrisma.shortcode.delete.mockResolvedValueOnce(shortCodeWithUser);
+    test('should send pubsub message to `shortcode/{uid}/revoked` on successful deletion of Shortcode', async () => {
+      mockPrisma.shortcode.delete.mockResolvedValueOnce(mockEmbed);
 
       const result = await shortcodeService.revokeShortCode(
-        shortCodeWithUser.id,
-        shortCodeWithUser.creatorUid,
+        mockEmbed.id,
+        mockEmbed.creatorUid,
       );
 
       expect(mockPubSub.publish).toHaveBeenCalledWith(
-        `shortcode/${shortCodeWithUser.creatorUid}/revoked`,
+        `shortcode/${mockEmbed.creatorUid}/revoked`,
         {
-          id: shortCodeWithUser.id,
-          createdOn: shortCodeWithUser.createdOn,
-          request: JSON.stringify(shortCodeWithUser.request),
+          id: mockEmbed.id,
+          createdOn: mockEmbed.createdOn,
+          request: JSON.stringify(mockEmbed.request),
+          properties: JSON.stringify(mockEmbed.embedProperties),
         },
       );
     });
   });
 
   describe('deleteUserShortCodes', () => {
-    test('should successfully delete all users shortcodes with valid user uid', async () => {
+    test('should successfully delete all users Shortcodes with valid user uid', async () => {
       mockPrisma.shortcode.deleteMany.mockResolvedValueOnce({ count: 1 });
 
       const result = await shortcodeService.deleteUserShortCodes(
-        shortCodeWithUser.creatorUid,
+        mockEmbed.creatorUid,
       );
       expect(result).toEqual(1);
     });
@@ -303,9 +394,176 @@ describe('ShortcodeService', () => {
       mockPrisma.shortcode.deleteMany.mockResolvedValueOnce({ count: 0 });
 
       const result = await shortcodeService.deleteUserShortCodes(
-        shortCodeWithUser.creatorUid,
+        mockEmbed.creatorUid,
       );
       expect(result).toEqual(0);
     });
   });
+
+  describe('updateShortcode', () => {
+    test('should return SHORTCODE_PROPERTIES_NOT_FOUND error when updatedProps in invalid', async () => {
+      const result = await shortcodeService.updateEmbedProperties(
+        mockEmbed.id,
+        user.uid,
+        '',
+      );
+      expect(result).toEqualLeft(SHORTCODE_PROPERTIES_NOT_FOUND);
+    });
+
+    test('should return SHORTCODE_PROPERTIES_NOT_FOUND error when updatedProps in invalid JSON format', async () => {
+      const result = await shortcodeService.updateEmbedProperties(
+        mockEmbed.id,
+        user.uid,
+        '{kk',
+      );
+      expect(result).toEqualLeft(SHORTCODE_INVALID_PROPERTIES_JSON);
+    });
+
+    test('should return SHORTCODE_NOT_FOUND error when Shortcode ID is invalid', async () => {
+      mockPrisma.shortcode.update.mockRejectedValue('RecordNotFound');
+      const result = await shortcodeService.updateEmbedProperties(
+        'invalidID',
+        user.uid,
+        '{}',
+      );
+      expect(result).toEqualLeft(SHORTCODE_NOT_FOUND);
+    });
+
+    test('should successfully update a Shortcodes with valid inputs', async () => {
+      mockPrisma.shortcode.update.mockResolvedValueOnce({
+        ...mockEmbed,
+        embedProperties: '{"foo":"bar"}',
+      });
+
+      const result = await shortcodeService.updateEmbedProperties(
+        mockEmbed.id,
+        user.uid,
+        '{"foo":"bar"}',
+      );
+      expect(result).toEqualRight({
+        id: mockEmbed.id,
+        createdOn: mockEmbed.createdOn,
+        request: JSON.stringify(mockEmbed.request),
+        properties: JSON.stringify('{"foo":"bar"}'),
+      });
+    });
+
+    test('should send pubsub message to `shortcode/{uid}/updated` on successful Update of Shortcode', async () => {
+      mockPrisma.shortcode.update.mockResolvedValueOnce({
+        ...mockEmbed,
+        embedProperties: '{"foo":"bar"}',
+      });
+
+      const result = await shortcodeService.updateEmbedProperties(
+        mockEmbed.id,
+        user.uid,
+        '{"foo":"bar"}',
+      );
+
+      expect(mockPubSub.publish).toHaveBeenCalledWith(
+        `shortcode/${mockEmbed.creatorUid}/updated`,
+        {
+          id: mockEmbed.id,
+          createdOn: mockEmbed.createdOn,
+          request: JSON.stringify(mockEmbed.request),
+          properties: JSON.stringify('{"foo":"bar"}'),
+        },
+      );
+    });
+  });
+
+  describe('deleteShortcode', () => {
+    test('should return true on successful deletion of Shortcode with valid inputs', async () => {
+      mockPrisma.shortcode.delete.mockResolvedValueOnce(mockEmbed);
+
+      const result = await shortcodeService.deleteShortcode(mockEmbed.id);
+      expect(result).toEqualRight(true);
+    });
+
+    test('should return SHORTCODE_NOT_FOUND error when Shortcode is invalid', async () => {
+      mockPrisma.shortcode.delete.mockRejectedValue('RecordNotFound');
+
+      expect(shortcodeService.deleteShortcode('invalid')).resolves.toEqualLeft(
+        SHORTCODE_NOT_FOUND,
+      );
+    });
+  });
+
+  describe('fetchAllShortcodes', () => {
+    test('should return list of Shortcodes with valid inputs and no cursor', async () => {
+      mockPrisma.shortcode.findMany.mockResolvedValueOnce(
+        shortcodesWithUserEmail,
+      );
+
+      const result = await shortcodeService.fetchAllShortcodes(
+        {
+          cursor: null,
+          take: 10,
+        },
+        user.email,
+      );
+      expect(result).toEqual(<ShortcodeWithUserEmail[]>[
+        {
+          id: shortcodes[0].id,
+          request: JSON.stringify(shortcodes[0].request),
+          properties: JSON.stringify(shortcodes[0].embedProperties),
+          createdOn: shortcodes[0].createdOn,
+          creator: {
+            uid: user.uid,
+            email: user.email,
+          },
+        },
+        {
+          id: shortcodes[1].id,
+          request: JSON.stringify(shortcodes[1].request),
+          properties: JSON.stringify(shortcodes[1].embedProperties),
+          createdOn: shortcodes[1].createdOn,
+          creator: {
+            uid: user.uid,
+            email: user.email,
+          },
+        },
+      ]);
+    });
+
+    test('should return list of Shortcode with valid inputs and cursor', async () => {
+      mockPrisma.shortcode.findMany.mockResolvedValue([
+        shortcodesWithUserEmail[1],
+      ]);
+
+      const result = await shortcodeService.fetchAllShortcodes(
+        {
+          cursor: 'blablabla',
+          take: 10,
+        },
+        user.email,
+      );
+      expect(result).toEqual(<ShortcodeWithUserEmail[]>[
+        {
+          id: shortcodes[1].id,
+          request: JSON.stringify(shortcodes[1].request),
+          properties: JSON.stringify(shortcodes[1].embedProperties),
+          createdOn: shortcodes[1].createdOn,
+          creator: {
+            uid: user.uid,
+            email: user.email,
+          },
+        },
+      ]);
+    });
+
+    test('should return an empty array for an invalid cursor', async () => {
+      mockPrisma.shortcode.findMany.mockResolvedValue([]);
+
+      const result = await shortcodeService.fetchAllShortcodes(
+        {
+          cursor: 'invalidcursor',
+          take: 10,
+        },
+        user.email,
+      );
+
+      expect(result).toHaveLength(0);
+    });
+  });
 });

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

@@ -1,12 +1,16 @@
 import { Injectable, OnModuleInit } from '@nestjs/common';
 import * as T from 'fp-ts/Task';
-import * as O from 'fp-ts/Option';
 import * as TO from 'fp-ts/TaskOption';
 import * as E from 'fp-ts/Either';
 import { PrismaService } from 'src/prisma/prisma.service';
-import { SHORTCODE_INVALID_JSON, SHORTCODE_NOT_FOUND } from 'src/errors';
+import {
+  SHORTCODE_INVALID_PROPERTIES_JSON,
+  SHORTCODE_INVALID_REQUEST_JSON,
+  SHORTCODE_NOT_FOUND,
+  SHORTCODE_PROPERTIES_NOT_FOUND,
+} from 'src/errors';
 import { UserDataHandler } from 'src/user/user.data.handler';
-import { Shortcode } from './shortcode.model';
+import { Shortcode, ShortcodeWithUserEmail } from './shortcode.model';
 import { Shortcode as DBShortCode } from '@prisma/client';
 import { PubSubService } from 'src/pubsub/pubsub.service';
 import { UserService } from 'src/user/user.service';
@@ -46,10 +50,14 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {
    * @param shortcodeInfo Prisma Shortcode type
    * @returns GQL Shortcode
    */
-  private returnShortCode(shortcodeInfo: DBShortCode): Shortcode {
+  private cast(shortcodeInfo: DBShortCode): Shortcode {
     return <Shortcode>{
       id: shortcodeInfo.id,
       request: JSON.stringify(shortcodeInfo.request),
+      properties:
+        shortcodeInfo.embedProperties != null
+          ? JSON.stringify(shortcodeInfo.embedProperties)
+          : null,
       createdOn: shortcodeInfo.createdOn,
     };
   }
@@ -94,7 +102,7 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {
       const shortcodeInfo = await this.prisma.shortcode.findFirstOrThrow({
         where: { id: shortcode },
       });
-      return E.right(this.returnShortCode(shortcodeInfo));
+      return E.right(this.cast(shortcodeInfo));
     } catch (error) {
       return E.left(SHORTCODE_NOT_FOUND);
     }
@@ -104,14 +112,22 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {
    * Create a new ShortCode
    *
    * @param request JSON string of request details
-   * @param userUID user UID, if present
+   * @param userInfo user UI
+   * @param properties JSON string of embed properties, if present
    * @returns Either of ShortCode or error
    */
-  async createShortcode(request: string, userUID: string | null) {
-    const shortcodeData = stringToJson(request);
-    if (E.isLeft(shortcodeData)) return E.left(SHORTCODE_INVALID_JSON);
+  async createShortcode(
+    request: string,
+    properties: string | null = null,
+    userInfo: AuthUser,
+  ) {
+    const requestData = stringToJson(request);
+    if (E.isLeft(requestData) || !requestData.right)
+      return E.left(SHORTCODE_INVALID_REQUEST_JSON);
 
-    const user = await this.userService.findUserById(userUID);
+    const parsedProperties = stringToJson(properties);
+    if (E.isLeft(parsedProperties))
+      return E.left(SHORTCODE_INVALID_PROPERTIES_JSON);
 
     const generatedShortCode = await this.generateUniqueShortCodeID();
     if (E.isLeft(generatedShortCode)) return E.left(generatedShortCode.left);
@@ -119,8 +135,9 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {
     const createdShortCode = await this.prisma.shortcode.create({
       data: {
         id: generatedShortCode.right,
-        request: shortcodeData.right,
-        creatorUid: O.isNone(user) ? null : user.value.uid,
+        request: requestData.right,
+        embedProperties: parsedProperties.right ?? undefined,
+        creatorUid: userInfo.uid,
       },
     });
 
@@ -128,11 +145,11 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {
     if (createdShortCode.creatorUid) {
       this.pubsub.publish(
         `shortcode/${createdShortCode.creatorUid}/created`,
-        this.returnShortCode(createdShortCode),
+        this.cast(createdShortCode),
       );
     }
 
-    return E.right(this.returnShortCode(createdShortCode));
+    return E.right(this.cast(createdShortCode));
   }
 
   /**
@@ -156,14 +173,14 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {
     });
 
     const fetchedShortCodes: Shortcode[] = shortCodes.map((code) =>
-      this.returnShortCode(code),
+      this.cast(code),
     );
 
     return fetchedShortCodes;
   }
 
   /**
-   * Delete a ShortCode
+   * Delete a ShortCode created by User of uid
    *
    * @param shortcode ShortCode
    * @param uid User Uid
@@ -182,7 +199,7 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {
 
       this.pubsub.publish(
         `shortcode/${deletedShortCodes.creatorUid}/revoked`,
-        this.returnShortCode(deletedShortCodes),
+        this.cast(deletedShortCodes),
       );
 
       return E.right(true);
@@ -205,4 +222,118 @@ export class ShortcodeService implements UserDataHandler, OnModuleInit {
 
     return deletedShortCodes.count;
   }
+
+  /**
+   * Delete a Shortcode
+   *
+   * @param shortcodeID ID of Shortcode being deleted
+   * @returns Boolean on successful deletion
+   */
+  async deleteShortcode(shortcodeID: string) {
+    try {
+      await this.prisma.shortcode.delete({
+        where: {
+          id: shortcodeID,
+        },
+      });
+
+      return E.right(true);
+    } catch (error) {
+      return E.left(SHORTCODE_NOT_FOUND);
+    }
+  }
+
+  /**
+   * Update a created Shortcode
+   * @param shortcodeID Shortcode ID
+   * @param uid User Uid
+   * @returns Updated Shortcode
+   */
+  async updateEmbedProperties(
+    shortcodeID: string,
+    uid: string,
+    updatedProps: string,
+  ) {
+    if (!updatedProps) return E.left(SHORTCODE_PROPERTIES_NOT_FOUND);
+
+    const parsedProperties = stringToJson(updatedProps);
+    if (E.isLeft(parsedProperties) || !parsedProperties.right)
+      return E.left(SHORTCODE_INVALID_PROPERTIES_JSON);
+
+    try {
+      const updatedShortcode = await this.prisma.shortcode.update({
+        where: {
+          creator_uid_shortcode_unique: {
+            creatorUid: uid,
+            id: shortcodeID,
+          },
+        },
+        data: {
+          embedProperties: parsedProperties.right,
+        },
+      });
+
+      this.pubsub.publish(
+        `shortcode/${updatedShortcode.creatorUid}/updated`,
+        this.cast(updatedShortcode),
+      );
+
+      return E.right(this.cast(updatedShortcode));
+    } catch (error) {
+      return E.left(SHORTCODE_NOT_FOUND);
+    }
+  }
+
+  /**
+   * Fetch all created ShortCodes
+   *
+   * @param args Pagination arguments
+   * @param userEmail User email
+   * @returns ShortcodeWithUserEmail
+   */
+  async fetchAllShortcodes(
+    args: PaginationArgs,
+    userEmail: string | null = null,
+  ) {
+    const shortCodes = await this.prisma.shortcode.findMany({
+      where: userEmail
+        ? {
+            User: {
+              email: userEmail,
+            },
+          }
+        : undefined,
+      orderBy: {
+        createdOn: 'desc',
+      },
+      skip: args.cursor ? 1 : 0,
+      take: args.take,
+      cursor: args.cursor ? { id: args.cursor } : undefined,
+      include: {
+        User: true,
+      },
+    });
+
+    const fetchedShortCodes: ShortcodeWithUserEmail[] = shortCodes.map(
+      (code) => {
+        return <ShortcodeWithUserEmail>{
+          id: code.id,
+          request: JSON.stringify(code.request),
+          properties:
+            code.embedProperties != null
+              ? JSON.stringify(code.embedProperties)
+              : null,
+          createdOn: code.createdOn,
+          creator: code.User
+            ? {
+                uid: code.User.uid,
+                email: code.User.email,
+              }
+            : null,
+        };
+      },
+    );
+
+    return fetchedShortCodes;
+  }
 }

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

@@ -14,6 +14,13 @@ export class CreateRootTeamCollectionArgs {
 
   @Field({ name: 'title', description: 'Title of the new collection' })
   title: string;
+
+  @Field({
+    name: 'data',
+    description: 'JSON string representing the collection data',
+    nullable: true,
+  })
+  data: string;
 }
 
 @ArgsType()
@@ -26,6 +33,13 @@ export class CreateChildTeamCollectionArgs {
 
   @Field({ name: 'childTitle', description: 'Title of the new collection' })
   childTitle: string;
+
+  @Field({
+    name: 'data',
+    description: 'JSON string representing the collection data',
+    nullable: true,
+  })
+  data: string;
 }
 
 @ArgsType()
@@ -33,12 +47,14 @@ export class RenameTeamCollectionArgs {
   @Field(() => ID, {
     name: 'collectionID',
     description: 'ID of the collection',
+    deprecationReason: 'Switch to updateTeamCollection mutation instead',
   })
   collectionID: string;
 
   @Field({
     name: 'newTitle',
     description: 'The updated title of the collection',
+    deprecationReason: 'Switch to updateTeamCollection mutation instead',
   })
   newTitle: string;
 }
@@ -98,3 +114,26 @@ export class ReplaceTeamCollectionArgs {
   })
   parentCollectionID?: string;
 }
+
+@ArgsType()
+export class UpdateTeamCollectionArgs {
+  @Field(() => ID, {
+    name: 'collectionID',
+    description: 'ID of the collection',
+  })
+  collectionID: string;
+
+  @Field({
+    name: 'newTitle',
+    description: 'The updated title of the collection',
+    nullable: true,
+  })
+  newTitle: string;
+
+  @Field({
+    name: 'data',
+    description: 'JSON string representing the collection data',
+    nullable: true,
+  })
+  data: string;
+}

packages/hoppscotch-backend/src/team-collection/team-collection.model.ts

@@ -12,12 +12,17 @@ export class TeamCollection {
   })
   title: string;
 
+  @Field({
+    description: 'JSON string representing the collection data',
+    nullable: true,
+  })
+  data: string;
+
   @Field(() => ID, {
     description: 'ID of the collection',
     nullable: true,
   })
   parentID: string;
-  teamID: string;
 }
 
 @ObjectType()

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

@@ -25,6 +25,7 @@ import {
   MoveTeamCollectionArgs,
   RenameTeamCollectionArgs,
   ReplaceTeamCollectionArgs,
+  UpdateTeamCollectionArgs,
   UpdateTeamCollectionOrderArgs,
 } from './input-type.args';
 import * as E from 'fp-ts/Either';
@@ -141,7 +142,14 @@ export class TeamCollectionResolver {
     );
 
     if (E.isLeft(teamCollections)) throwErr(teamCollections.left);
-    return teamCollections.right;
+    return <TeamCollection>{
+      id: teamCollections.right.id,
+      title: teamCollections.right.title,
+      parentID: teamCollections.right.parentID,
+      data: !teamCollections.right.data
+        ? null
+        : JSON.stringify(teamCollections.right.data),
+    };
   }
 
   // Mutations
@@ -155,6 +163,7 @@ export class TeamCollectionResolver {
     const teamCollection = await this.teamCollectionService.createCollection(
       args.teamID,
       args.title,
+      args.data,
       null,
     );
 
@@ -230,6 +239,7 @@ export class TeamCollectionResolver {
     const teamCollection = await this.teamCollectionService.createCollection(
       team.right.id,
       args.childTitle,
+      args.data,
       args.collectionID,
     );
 
@@ -239,6 +249,7 @@ export class TeamCollectionResolver {
 
   @Mutation(() => TeamCollection, {
     description: 'Rename a collection',
+    deprecationReason: 'Switch to updateTeamCollection mutation instead',
   })
   @UseGuards(GqlAuthGuard, GqlCollectionTeamMemberGuard)
   @RequiresTeamRole(TeamMemberRole.OWNER, TeamMemberRole.EDITOR)
@@ -303,6 +314,23 @@ export class TeamCollectionResolver {
     return request.right;
   }
 
+  @Mutation(() => TeamCollection, {
+    description: 'Update Team Collection details',
+  })
+  @UseGuards(GqlAuthGuard, GqlCollectionTeamMemberGuard)
+  @RequiresTeamRole(TeamMemberRole.OWNER, TeamMemberRole.EDITOR)
+  async updateTeamCollection(@Args() args: UpdateTeamCollectionArgs) {
+    const updatedTeamCollection =
+      await this.teamCollectionService.updateTeamCollection(
+        args.collectionID,
+        args.data,
+        args.newTitle,
+      );
+
+    if (E.isLeft(updatedTeamCollection)) throwErr(updatedTeamCollection.left);
+    return updatedTeamCollection.right;
+  }
+
   // Subscriptions
 
   @Subscription(() => TeamCollection, {

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

@@ -1,6 +1,7 @@
 import { Team, TeamCollection as DBTeamCollection } from '@prisma/client';
-import { mock, mockDeep, mockReset } from 'jest-mock-extended';
+import { mockDeep, mockReset } from 'jest-mock-extended';
 import {
+  TEAM_COLL_DATA_INVALID,
   TEAM_COLL_DEST_SAME,
   TEAM_COLL_INVALID_JSON,
   TEAM_COLL_IS_PARENT_COLL,
@@ -18,8 +19,6 @@ import { PubSubService } from 'src/pubsub/pubsub.service';
 import { AuthUser } from 'src/types/AuthUser';
 import { TeamCollectionService } from './team-collection.service';
 import { TeamCollection } from './team-collection.model';
-import { TeamCollectionModule } from './team-collection.module';
-import * as E from 'fp-ts/Either';
 
 const mockPrisma = mockDeep<PrismaService>();
 const mockPubSub = mockDeep<PubSubService>();
@@ -54,35 +53,60 @@ const rootTeamCollection: DBTeamCollection = {
   id: '123',
   orderIndex: 1,
   parentID: null,
+  data: {},
   title: 'Root Collection 1',
   teamID: team.id,
   createdOn: currentTime,
   updatedOn: currentTime,
 };
 
+const rootTeamCollectionsCasted: TeamCollection = {
+  id: rootTeamCollection.id,
+  title: rootTeamCollection.title,
+  parentID: rootTeamCollection.parentID,
+  data: JSON.stringify(rootTeamCollection.data),
+};
+
 const rootTeamCollection_2: DBTeamCollection = {
   id: 'erv',
   orderIndex: 2,
   parentID: null,
+  data: {},
   title: 'Root Collection 1',
   teamID: team.id,
   createdOn: currentTime,
   updatedOn: currentTime,
 };
 
+const rootTeamCollection_2Casted: TeamCollection = {
+  id: 'erv',
+  parentID: null,
+  data: JSON.stringify(rootTeamCollection_2.data),
+  title: 'Root Collection 1',
+};
+
 const childTeamCollection: DBTeamCollection = {
   id: 'rfe',
   orderIndex: 1,
   parentID: rootTeamCollection.id,
+  data: {},
   title: 'Child Collection 1',
   teamID: team.id,
   createdOn: currentTime,
   updatedOn: currentTime,
 };
 
+const childTeamCollectionCasted: TeamCollection = {
+  id: 'rfe',
+  parentID: rootTeamCollection.id,
+  data: JSON.stringify(childTeamCollection.data),
+  title: 'Child Collection 1',
+};
+
 const childTeamCollection_2: DBTeamCollection = {
   id: 'bgdz',
   orderIndex: 1,
+  data: {},
   parentID: rootTeamCollection_2.id,
   title: 'Child Collection 1',
   teamID: team.id,
@@ -90,11 +114,20 @@ const childTeamCollection_2: DBTeamCollection = {
   updatedOn: currentTime,
 };
 
+const childTeamCollection_2Casted: TeamCollection = {
+  id: 'bgdz',
+  data: JSON.stringify(childTeamCollection_2.data),
+  parentID: rootTeamCollection_2.id,
+  title: 'Child Collection 1',
+};
+
 const rootTeamCollectionList: DBTeamCollection[] = [
   {
     id: 'fdv',
     orderIndex: 1,
     parentID: null,
+    data: {},
+
     title: 'Root Collection 1',
     teamID: team.id,
     createdOn: currentTime,
@@ -105,6 +138,8 @@ const rootTeamCollectionList: DBTeamCollection[] = [
     orderIndex: 2,
     parentID: null,
     title: 'Root Collection 1',
+    data: {},
+
     teamID: team.id,
     createdOn: currentTime,
     updatedOn: currentTime,
@@ -114,6 +149,8 @@ const rootTeamCollectionList: DBTeamCollection[] = [
     orderIndex: 3,
     parentID: null,
     title: 'Root Collection 1',
+    data: {},
+
     teamID: team.id,
     createdOn: currentTime,
     updatedOn: currentTime,
@@ -122,6 +159,8 @@ const rootTeamCollectionList: DBTeamCollection[] = [
     id: 'bre3',
     orderIndex: 4,
     parentID: null,
+    data: {},
+
     title: 'Root Collection 1',
     teamID: team.id,
     createdOn: currentTime,
@@ -132,6 +171,8 @@ const rootTeamCollectionList: DBTeamCollection[] = [
     orderIndex: 5,
     parentID: null,
     title: 'Root Collection 1',
+    data: {},
+
     teamID: team.id,
     createdOn: currentTime,
     updatedOn: currentTime,
@@ -142,6 +183,8 @@ const rootTeamCollectionList: DBTeamCollection[] = [
     parentID: null,
     title: 'Root Collection 1',
     teamID: team.id,
+    data: {},
+
     createdOn: currentTime,
     updatedOn: currentTime,
   },
@@ -151,6 +194,8 @@ const rootTeamCollectionList: DBTeamCollection[] = [
     parentID: null,
     title: 'Root Collection 1',
     teamID: team.id,
+    data: {},
+
     createdOn: currentTime,
     updatedOn: currentTime,
   },
@@ -159,6 +204,7 @@ const rootTeamCollectionList: DBTeamCollection[] = [
     orderIndex: 8,
     parentID: null,
     title: 'Root Collection 1',
+    data: {},
     teamID: team.id,
     createdOn: currentTime,
     updatedOn: currentTime,
@@ -168,6 +214,7 @@ const rootTeamCollectionList: DBTeamCollection[] = [
     orderIndex: 9,
     parentID: null,
     title: 'Root Collection 1',
+    data: {},
     teamID: team.id,
     createdOn: currentTime,
     updatedOn: currentTime,
@@ -178,17 +225,83 @@ const rootTeamCollectionList: DBTeamCollection[] = [
     parentID: null,
     title: 'Root Collection 1',
     teamID: team.id,
+    data: {},
     createdOn: currentTime,
     updatedOn: currentTime,
   },
 ];
 
+const rootTeamCollectionListCasted: TeamCollection[] = [
+  {
+    id: 'fdv',
+    parentID: null,
+    title: 'Root Collection 1',
+    data: JSON.stringify(rootTeamCollection.data),
+  },
+  {
+    id: 'fbbg',
+    parentID: null,
+    title: 'Root Collection 1',
+    data: JSON.stringify(rootTeamCollection.data),
+  },
+  {
+    id: 'fgbfg',
+    parentID: null,
+    title: 'Root Collection 1',
+    data: JSON.stringify(rootTeamCollection.data),
+  },
+  {
+    id: 'bre3',
+    parentID: null,
+    data: JSON.stringify(rootTeamCollection.data),
+    title: 'Root Collection 1',
+  },
+  {
+    id: 'hghgf',
+    parentID: null,
+    title: 'Root Collection 1',
+    data: JSON.stringify(rootTeamCollection.data),
+  },
+  {
+    id: '123',
+    parentID: null,
+    title: 'Root Collection 1',
+    data: JSON.stringify(rootTeamCollection.data),
+  },
+  {
+    id: '54tyh',
+    parentID: null,
+    title: 'Root Collection 1',
+    data: JSON.stringify(rootTeamCollection.data),
+  },
+  {
+    id: '234re',
+    parentID: null,
+    title: 'Root Collection 1',
+    data: JSON.stringify(rootTeamCollection.data),
+  },
+  {
+    id: '34rtg',
+    parentID: null,
+    title: 'Root Collection 1',
+    data: JSON.stringify(rootTeamCollection.data),
+  },
+  {
+    id: '45tgh',
+    parentID: null,
+    title: 'Root Collection 1',
+    data: JSON.stringify(rootTeamCollection.data),
+  },
+];
+
 const childTeamCollectionList: DBTeamCollection[] = [
   {
     id: '123',
     orderIndex: 1,
     parentID: rootTeamCollection.id,
     title: 'Root Collection 1',
+    data: {},
+
     teamID: team.id,
     createdOn: currentTime,
     updatedOn: currentTime,
@@ -198,6 +311,8 @@ const childTeamCollectionList: DBTeamCollection[] = [
     orderIndex: 2,
     parentID: rootTeamCollection.id,
     title: 'Root Collection 1',
+    data: {},
+
     teamID: team.id,
     createdOn: currentTime,
     updatedOn: currentTime,
@@ -207,6 +322,8 @@ const childTeamCollectionList: DBTeamCollection[] = [
     orderIndex: 3,
     parentID: rootTeamCollection.id,
     title: 'Root Collection 1',
+    data: {},
+
     teamID: team.id,
     createdOn: currentTime,
     updatedOn: currentTime,
@@ -215,6 +332,8 @@ const childTeamCollectionList: DBTeamCollection[] = [
     id: '567',
     orderIndex: 4,
     parentID: rootTeamCollection.id,
+    data: {},
+
     title: 'Root Collection 1',
     teamID: team.id,
     createdOn: currentTime,
@@ -224,6 +343,8 @@ const childTeamCollectionList: DBTeamCollection[] = [
     id: '123',
     orderIndex: 5,
     parentID: rootTeamCollection.id,
+    data: {},
+
     title: 'Root Collection 1',
     teamID: team.id,
     createdOn: currentTime,
@@ -233,6 +354,8 @@ const childTeamCollectionList: DBTeamCollection[] = [
     id: '678',
     orderIndex: 6,
     parentID: rootTeamCollection.id,
+    data: {},
+
     title: 'Root Collection 1',
     teamID: team.id,
     createdOn: currentTime,
@@ -242,6 +365,8 @@ const childTeamCollectionList: DBTeamCollection[] = [
     id: '789',
     orderIndex: 7,
     parentID: rootTeamCollection.id,
+    data: {},
+
     title: 'Root Collection 1',
     teamID: team.id,
     createdOn: currentTime,
@@ -251,6 +376,8 @@ const childTeamCollectionList: DBTeamCollection[] = [
     id: '890',
     orderIndex: 8,
     parentID: rootTeamCollection.id,
+    data: {},
+
     title: 'Root Collection 1',
     teamID: team.id,
     createdOn: currentTime,
@@ -260,6 +387,7 @@ const childTeamCollectionList: DBTeamCollection[] = [
     id: '012',
     orderIndex: 9,
     parentID: rootTeamCollection.id,
+    data: {},
     title: 'Root Collection 1',
     teamID: team.id,
     createdOn: currentTime,
@@ -269,6 +397,8 @@ const childTeamCollectionList: DBTeamCollection[] = [
     id: '0bhu',
     orderIndex: 10,
     parentID: rootTeamCollection.id,
+    data: {},
+
     title: 'Root Collection 1',
     teamID: team.id,
     createdOn: currentTime,
@@ -276,6 +406,75 @@ const childTeamCollectionList: DBTeamCollection[] = [
   },
 ];
 
+const childTeamCollectionListCasted: TeamCollection[] = [
+  {
+    id: '123',
+    parentID: rootTeamCollection.id,
+    title: 'Root Collection 1',
+    data: JSON.stringify({}),
+  },
+  {
+    id: '345',
+    parentID: rootTeamCollection.id,
+    title: 'Root Collection 1',
+    data: JSON.stringify({}),
+  },
+  {
+    id: '456',
+    parentID: rootTeamCollection.id,
+    title: 'Root Collection 1',
+    data: JSON.stringify({}),
+  },
+  {
+    id: '567',
+    parentID: rootTeamCollection.id,
+    data: JSON.stringify({}),
+
+    title: 'Root Collection 1',
+  },
+  {
+    id: '123',
+    parentID: rootTeamCollection.id,
+    data: JSON.stringify({}),
+
+    title: 'Root Collection 1',
+  },
+  {
+    id: '678',
+    parentID: rootTeamCollection.id,
+    data: JSON.stringify({}),
+
+    title: 'Root Collection 1',
+  },
+  {
+    id: '789',
+    parentID: rootTeamCollection.id,
+    data: JSON.stringify({}),
+
+    title: 'Root Collection 1',
+  },
+  {
+    id: '890',
+    parentID: rootTeamCollection.id,
+    data: JSON.stringify({}),
+
+    title: 'Root Collection 1',
+  },
+  {
+    id: '012',
+    parentID: rootTeamCollection.id,
+    data: JSON.stringify({}),
+    title: 'Root Collection 1',
+  },
+  {
+    id: '0bhu',
+    parentID: rootTeamCollection.id,
+    data: JSON.stringify({}),
+
+    title: 'Root Collection 1',
+  },
+];
+
 beforeEach(() => {
   mockReset(mockPrisma);
   mockPubSub.publish.mockClear();
@@ -314,7 +513,7 @@ describe('getParentOfCollection', () => {
     const result = await teamCollectionService.getParentOfCollection(
       childTeamCollection.id,
     );
-    expect(result).toEqual(rootTeamCollection);
+    expect(result).toEqual(rootTeamCollectionsCasted);
   });
 
   test('should return null successfully for a root collection with valid collectionID', async () => {
@@ -350,7 +549,7 @@ describe('getChildrenOfCollection', () => {
       null,
       10,
     );
-    expect(result).toEqual(childTeamCollectionList);
+    expect(result).toEqual(childTeamCollectionListCasted);
   });
 
   test('should return a list of 3 child collections successfully with cursor being equal to the 7th item in the list', async () => {
@@ -366,9 +565,9 @@ describe('getChildrenOfCollection', () => {
       10,
     );
     expect(result).toEqual([
-      { ...childTeamCollectionList[7] },
-      { ...childTeamCollectionList[8] },
-      { ...childTeamCollectionList[9] },
+      { ...childTeamCollectionListCasted[7] },
+      { ...childTeamCollectionListCasted[8] },
+      { ...childTeamCollectionListCasted[9] },
     ]);
   });
 
@@ -395,7 +594,7 @@ describe('getTeamRootCollections', () => {
       null,
       10,
     );
-    expect(result).toEqual(rootTeamCollectionList);
+    expect(result).toEqual(rootTeamCollectionListCasted);
   });
 
   test('should return a list of 3 root collections successfully with cursor being equal to the 7th item in the list', async () => {
@@ -411,9 +610,9 @@ describe('getTeamRootCollections', () => {
       10,
     );
     expect(result).toEqual([
-      { ...rootTeamCollectionList[7] },
-      { ...rootTeamCollectionList[8] },
-      { ...rootTeamCollectionList[9] },
+      { ...rootTeamCollectionListCasted[7] },
+      { ...rootTeamCollectionListCasted[8] },
+      { ...rootTeamCollectionListCasted[9] },
     ]);
   });
 
@@ -467,6 +666,7 @@ describe('createCollection', () => {
     const result = await teamCollectionService.createCollection(
       rootTeamCollection.teamID,
       'ab',
+      JSON.stringify(rootTeamCollection.data),
       rootTeamCollection.id,
     );
     expect(result).toEqualLeft(TEAM_COLL_SHORT_TITLE);
@@ -481,11 +681,27 @@ describe('createCollection', () => {
     const result = await teamCollectionService.createCollection(
       rootTeamCollection.teamID,
       'abcd',
+      JSON.stringify(rootTeamCollection.data),
       rootTeamCollection.id,
     );
     expect(result).toEqualLeft(TEAM_NOT_OWNER);
   });
 
+  test('should throw TEAM_COLL_DATA_INVALID when parent TeamCollection does not belong to the team', async () => {
+    // isOwnerCheck
+    mockPrisma.teamCollection.findFirstOrThrow.mockResolvedValueOnce(
+      rootTeamCollection,
+    );
+
+    const result = await teamCollectionService.createCollection(
+      rootTeamCollection.teamID,
+      'abcd',
+      '{',
+      rootTeamCollection.id,
+    );
+    expect(result).toEqualLeft(TEAM_COLL_DATA_INVALID);
+  });
+
   test('should successfully create a new root TeamCollection with valid inputs', async () => {
     // isOwnerCheck
     mockPrisma.teamCollection.findFirstOrThrow.mockResolvedValueOnce(
@@ -499,9 +715,10 @@ describe('createCollection', () => {
     const result = await teamCollectionService.createCollection(
       rootTeamCollection.teamID,
       'abcdefg',
+      JSON.stringify(rootTeamCollection.data),
       rootTeamCollection.id,
     );
-    expect(result).toEqualRight(rootTeamCollection);
+    expect(result).toEqualRight(rootTeamCollectionsCasted);
   });
 
   test('should successfully create a new child TeamCollection with valid inputs', async () => {
@@ -517,9 +734,10 @@ describe('createCollection', () => {
     const result = await teamCollectionService.createCollection(
       childTeamCollection.teamID,
       childTeamCollection.title,
+      JSON.stringify(rootTeamCollection.data),
       rootTeamCollection.id,
     );
-    expect(result).toEqualRight(childTeamCollection);
+    expect(result).toEqualRight(childTeamCollectionCasted);
   });
 
   test('should send pubsub message to "team_coll/<teamID>/coll_added" if child TeamCollection is created successfully', async () => {
@@ -535,11 +753,13 @@ describe('createCollection', () => {
     const result = await teamCollectionService.createCollection(
       childTeamCollection.teamID,
       childTeamCollection.title,
+      JSON.stringify(rootTeamCollection.data),
+
       rootTeamCollection.id,
     );
     expect(mockPubSub.publish).toHaveBeenCalledWith(
       `team_coll/${childTeamCollection.teamID}/coll_added`,
-      childTeamCollection,
+      childTeamCollectionCasted,
     );
   });
 
@@ -556,11 +776,13 @@ describe('createCollection', () => {
     const result = await teamCollectionService.createCollection(
       rootTeamCollection.teamID,
       'abcdefg',
+      JSON.stringify(rootTeamCollection.data),
+
       rootTeamCollection.id,
     );
     expect(mockPubSub.publish).toHaveBeenCalledWith(
       `team_coll/${rootTeamCollection.teamID}/coll_added`,
-      rootTeamCollection,
+      rootTeamCollectionsCasted,
     );
   });
 });
@@ -590,7 +812,7 @@ describe('renameCollection', () => {
       'NewTitle',
     );
     expect(result).toEqualRight({
-      ...rootTeamCollection,
+      ...rootTeamCollectionsCasted,
       title: 'NewTitle',
     });
   });
@@ -628,7 +850,7 @@ describe('renameCollection', () => {
     expect(mockPubSub.publish).toHaveBeenCalledWith(
       `team_coll/${rootTeamCollection.teamID}/coll_updated`,
       {
-        ...rootTeamCollection,
+        ...rootTeamCollectionsCasted,
         title: 'NewTitle',
       },
     );
@@ -835,9 +1057,8 @@ describe('moveCollection', () => {
       null,
     );
     expect(result).toEqualRight({
-      ...childTeamCollection,
+      ...childTeamCollectionCasted,
       parentID: null,
-      orderIndex: 2,
     });
   });
 
@@ -893,9 +1114,8 @@ describe('moveCollection', () => {
     expect(mockPubSub.publish).toHaveBeenCalledWith(
       `team_coll/${childTeamCollection.teamID}/coll_moved`,
       {
-        ...childTeamCollection,
+        ...childTeamCollectionCasted,
         parentID: null,
-        orderIndex: 2,
       },
     );
   });
@@ -934,9 +1154,8 @@ describe('moveCollection', () => {
       childTeamCollection_2.id,
     );
     expect(result).toEqualRight({
-      ...rootTeamCollection,
-      parentID: childTeamCollection_2.id,
-      orderIndex: 1,
+      ...rootTeamCollectionsCasted,
+      parentID: childTeamCollection_2Casted.id,
     });
   });
 
@@ -976,9 +1195,8 @@ describe('moveCollection', () => {
     expect(mockPubSub.publish).toHaveBeenCalledWith(
       `team_coll/${childTeamCollection_2.teamID}/coll_moved`,
       {
-        ...rootTeamCollection,
-        parentID: childTeamCollection_2.id,
-        orderIndex: 1,
+        ...rootTeamCollectionsCasted,
+        parentID: childTeamCollection_2Casted.id,
       },
     );
   });
@@ -1017,9 +1235,8 @@ describe('moveCollection', () => {
       childTeamCollection_2.id,
     );
     expect(result).toEqualRight({
-      ...childTeamCollection,
-      parentID: childTeamCollection_2.id,
-      orderIndex: 1,
+      ...childTeamCollectionCasted,
+      parentID: childTeamCollection_2Casted.id,
     });
   });
 
@@ -1059,9 +1276,8 @@ describe('moveCollection', () => {
     expect(mockPubSub.publish).toHaveBeenCalledWith(
       `team_coll/${childTeamCollection.teamID}/coll_moved`,
       {
-        ...childTeamCollection,
-        parentID: childTeamCollection_2.id,
-        orderIndex: 1,
+        ...childTeamCollectionCasted,
+        parentID: childTeamCollection_2Casted.id,
       },
     );
   });
@@ -1157,7 +1373,7 @@ describe('updateCollectionOrder', () => {
     expect(mockPubSub.publish).toHaveBeenCalledWith(
       `team_coll/${childTeamCollectionList[4].teamID}/coll_order_updated`,
       {
-        collection: rootTeamCollectionList[4],
+        collection: rootTeamCollectionListCasted[4],
         nextCollection: null,
       },
     );
@@ -1238,8 +1454,8 @@ describe('updateCollectionOrder', () => {
     expect(mockPubSub.publish).toHaveBeenCalledWith(
       `team_coll/${childTeamCollectionList[2].teamID}/coll_order_updated`,
       {
-        collection: childTeamCollectionList[4],
-        nextCollection: childTeamCollectionList[2],
+        collection: childTeamCollectionListCasted[4],
+        nextCollection: childTeamCollectionListCasted[2],
       },
     );
   });
@@ -1305,7 +1521,7 @@ describe('importCollectionsFromJSON', () => {
     );
     expect(mockPubSub.publish).toHaveBeenCalledWith(
       `team_coll/${rootTeamCollection.teamID}/coll_added`,
-      rootTeamCollection,
+      rootTeamCollectionsCasted,
     );
   });
 });
@@ -1424,7 +1640,7 @@ describe('replaceCollectionsWithJSON', () => {
     );
     expect(mockPubSub.publish).toHaveBeenCalledWith(
       `team_coll/${rootTeamCollection.teamID}/coll_added`,
-      rootTeamCollection,
+      rootTeamCollectionsCasted,
     );
   });
 });
@@ -1461,4 +1677,64 @@ describe('totalCollectionsInTeam', () => {
   });
 });
 
+describe('updateTeamCollection', () => {
+  test('should throw TEAM_COLL_SHORT_TITLE if title is invalid', async () => {
+    const result = await teamCollectionService.updateTeamCollection(
+      rootTeamCollection.id,
+      JSON.stringify(rootTeamCollection.data),
+      'de',
+    );
+    expect(result).toEqualLeft(TEAM_COLL_SHORT_TITLE);
+  });
+
+  test('should throw TEAM_COLL_DATA_INVALID is collection data is invalid', async () => {
+    const result = await teamCollectionService.updateTeamCollection(
+      rootTeamCollection.id,
+      '{',
+      rootTeamCollection.title,
+    );
+    expect(result).toEqualLeft(TEAM_COLL_DATA_INVALID);
+  });
+
+  test('should throw TEAM_COLL_NOT_FOUND is collectionID is invalid', async () => {
+    mockPrisma.teamCollection.update.mockRejectedValueOnce('RecordNotFound');
+
+    const result = await teamCollectionService.updateTeamCollection(
+      'invalid_id',
+      JSON.stringify(rootTeamCollection.data),
+      rootTeamCollection.title,
+    );
+    expect(result).toEqualLeft(TEAM_COLL_NOT_FOUND);
+  });
+
+  test('should successfully update a collection', async () => {
+    mockPrisma.teamCollection.update.mockResolvedValueOnce(rootTeamCollection);
+
+    const result = await teamCollectionService.updateTeamCollection(
+      rootTeamCollection.id,
+      JSON.stringify({ foo: 'bar' }),
+      'new_title',
+    );
+    expect(result).toEqualRight({
+      data: JSON.stringify({ foo: 'bar' }),
+      title: 'new_title',
+      ...rootTeamCollectionsCasted,
+    });
+  });
+
+  test('should send pubsub message to "team_coll/<teamID>/coll_updated" if TeamCollection is updated successfully', async () => {
+    mockPrisma.teamCollection.update.mockResolvedValueOnce(rootTeamCollection);
+
+    const result = await teamCollectionService.updateTeamCollection(
+      rootTeamCollection.id,
+      JSON.stringify(rootTeamCollection.data),
+      rootTeamCollection.title,
+    );
+    expect(mockPubSub.publish).toHaveBeenCalledWith(
+      `team_coll/${rootTeamCollection.teamID}/coll_updated`,
+      rootTeamCollectionsCasted,
+    );
+  });
+});
+
 //ToDo: write test cases for exportCollectionsToJSON

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

@@ -13,6 +13,7 @@ import {
   TEAM_COLL_IS_PARENT_COLL,
   TEAM_COL_SAME_NEXT_COLL,
   TEAM_COL_REORDERING_FAILED,
+  TEAM_COLL_DATA_INVALID,
 } from '../errors';
 import { PubSubService } from '../pubsub/pubsub.service';
 import { isValidLength } from 'src/utils';
@@ -69,6 +70,7 @@ export class TeamCollectionService {
           this.generatePrismaQueryObjForFBCollFolder(f, teamID, index + 1),
         ),
       },
+      data: folder.data ?? undefined,
     };
   }
 
@@ -118,6 +120,7 @@ export class TeamCollectionService {
       name: collection.right.title,
       folders: childrenCollectionObjects,
       requests: requests.map((x) => x.request),
+      data: JSON.stringify(collection.right.data),
     };
 
     return E.right(result);
@@ -198,8 +201,11 @@ export class TeamCollectionService {
       ),
     );
 
-    teamCollections.forEach((x) =>
-      this.pubsub.publish(`team_coll/${destTeamID}/coll_added`, x),
+    teamCollections.forEach((collection) =>
+      this.pubsub.publish(
+        `team_coll/${destTeamID}/coll_added`,
+        this.cast(collection),
+      ),
     );
 
     return E.right(true);
@@ -268,8 +274,11 @@ export class TeamCollectionService {
       ),
     );
 
-    teamCollections.forEach((x) =>
-      this.pubsub.publish(`team_coll/${destTeamID}/coll_added`, x),
+    teamCollections.forEach((collections) =>
+      this.pubsub.publish(
+        `team_coll/${destTeamID}/coll_added`,
+        this.cast(collections),
+      ),
     );
 
     return E.right(true);
@@ -277,11 +286,17 @@ export class TeamCollectionService {
 
   /**
    * Typecast a database TeamCollection to a TeamCollection model
+   *
    * @param teamCollection database TeamCollection
    * @returns TeamCollection model
    */
   private cast(teamCollection: DBTeamCollection): TeamCollection {
-    return <TeamCollection>{ ...teamCollection };
+    return <TeamCollection>{
+      id: teamCollection.id,
+      title: teamCollection.title,
+      parentID: teamCollection.parentID,
+      data: !teamCollection.data ? null : JSON.stringify(teamCollection.data),
+    };
   }
 
   /**
@@ -324,7 +339,7 @@ export class TeamCollectionService {
     });
     if (!teamCollection) return null;
 
-    return teamCollection.parent;
+    return !teamCollection.parent ? null : this.cast(teamCollection.parent);
   }
 
   /**
@@ -335,12 +350,12 @@ export class TeamCollectionService {
    * @param take Number of items we want returned
    * @returns A list of child collections
    */
-  getChildrenOfCollection(
+  async getChildrenOfCollection(
     collectionID: string,
     cursor: string | null,
     take: number,
   ) {
-    return this.prisma.teamCollection.findMany({
+    const res = await this.prisma.teamCollection.findMany({
       where: {
         parentID: collectionID,
       },
@@ -351,6 +366,12 @@ export class TeamCollectionService {
       skip: cursor ? 1 : 0,
       cursor: cursor ? { id: cursor } : undefined,
     });
+
+    const childCollections = res.map((teamCollection) =>
+      this.cast(teamCollection),
+    );
+
+    return childCollections;
   }
 
   /**
@@ -366,7 +387,7 @@ export class TeamCollectionService {
     cursor: string | null,
     take: number,
   ) {
-    return this.prisma.teamCollection.findMany({
+    const res = await this.prisma.teamCollection.findMany({
       where: {
         teamID,
         parentID: null,
@@ -378,6 +399,12 @@ export class TeamCollectionService {
       skip: cursor ? 1 : 0,
       cursor: cursor ? { id: cursor } : undefined,
     });
+
+    const teamCollections = res.map((teamCollection) =>
+      this.cast(teamCollection),
+    );
+
+    return teamCollections;
   }
 
   /**
@@ -470,6 +497,7 @@ export class TeamCollectionService {
   async createCollection(
     teamID: string,
     title: string,
+    data: string | null = null,
     parentTeamCollectionID: string | null,
   ) {
     const isTitleValid = isValidLength(title, this.TITLE_LENGTH);
@@ -481,6 +509,13 @@ export class TeamCollectionService {
       if (O.isNone(isOwner)) return E.left(TEAM_NOT_OWNER);
     }
 
+    if (data === '') return E.left(TEAM_COLL_DATA_INVALID);
+    if (data) {
+      const jsonReq = stringToJson(data);
+      if (E.isLeft(jsonReq)) return E.left(TEAM_COLL_DATA_INVALID);
+      data = jsonReq.right;
+    }
+
     const isParent = parentTeamCollectionID
       ? {
           connect: {
@@ -498,18 +533,23 @@ export class TeamCollectionService {
           },
         },
         parent: isParent,
+        data: data ?? undefined,
         orderIndex: !parentTeamCollectionID
           ? (await this.getRootCollectionsCount(teamID)) + 1
           : (await this.getChildCollectionsCount(parentTeamCollectionID)) + 1,
       },
     });
 
-    this.pubsub.publish(`team_coll/${teamID}/coll_added`, teamCollection);
+    this.pubsub.publish(
+      `team_coll/${teamID}/coll_added`,
+      this.cast(teamCollection),
+    );
 
     return E.right(this.cast(teamCollection));
   }
 
   /**
+   * @deprecated Use updateTeamCollection method instead
    * Update the title of a TeamCollection
    *
    * @param collectionID The Collection ID
@@ -532,10 +572,10 @@ export class TeamCollectionService {
 
       this.pubsub.publish(
         `team_coll/${updatedTeamCollection.teamID}/coll_updated`,
-        updatedTeamCollection,
+        this.cast(updatedTeamCollection),
       );
 
-      return E.right(updatedTeamCollection);
+      return E.right(this.cast(updatedTeamCollection));
     } catch (error) {
       return E.left(TEAM_COLL_NOT_FOUND);
     }
@@ -694,8 +734,8 @@ export class TeamCollectionService {
    * @returns An Option of boolean, is parent or not
    */
   private async isParent(
-    collection: TeamCollection,
-    destCollection: TeamCollection,
+    collection: DBTeamCollection,
+    destCollection: DBTeamCollection,
   ): Promise<O.Option<boolean>> {
     //* Recursively check if collection is a parent by going up the tree of child-parent collections until we reach a root collection i.e parentID === null
     //* Valid condition, isParent returns false
@@ -971,4 +1011,49 @@ export class TeamCollectionService {
     const teamCollectionsCount = this.prisma.teamCollection.count();
     return teamCollectionsCount;
   }
+
+  /**
+   * Update Team Collection details
+   *
+   * @param collectionID Collection ID
+   * @param collectionData new header data in a JSONified string form
+   * @param newTitle New title of the collection
+   * @returns Updated TeamCollection
+   */
+  async updateTeamCollection(
+    collectionID: string,
+    collectionData: string = null,
+    newTitle: string = null,
+  ) {
+    try {
+      if (newTitle != null) {
+        const isTitleValid = isValidLength(newTitle, this.TITLE_LENGTH);
+        if (!isTitleValid) return E.left(TEAM_COLL_SHORT_TITLE);
+      }
+
+      if (collectionData === '') return E.left(TEAM_COLL_DATA_INVALID);
+      if (collectionData) {
+        const jsonReq = stringToJson(collectionData);
+        if (E.isLeft(jsonReq)) return E.left(TEAM_COLL_DATA_INVALID);
+        collectionData = jsonReq.right;
+      }
+
+      const updatedTeamCollection = await this.prisma.teamCollection.update({
+        where: { id: collectionID },
+        data: {
+          data: collectionData ?? undefined,
+          title: newTitle ?? undefined,
+        },
+      });
+
+      this.pubsub.publish(
+        `team_coll/${updatedTeamCollection.teamID}/coll_updated`,
+        this.cast(updatedTeamCollection),
+      );
+
+      return E.right(this.cast(updatedTeamCollection));
+    } catch (e) {
+      return E.left(TEAM_COLL_NOT_FOUND);
+    }
+  }
 }

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

@@ -301,7 +301,7 @@ describe('TeamEnvironmentsService', () => {
 
   describe('createDuplicateEnvironment', () => {
     test('should successfully duplicate an existing team environment', async () => {
-      mockPrisma.teamEnvironment.findFirst.mockResolvedValueOnce(
+      mockPrisma.teamEnvironment.findFirstOrThrow.mockResolvedValueOnce(
         teamEnvironment,
       );
 
@@ -322,7 +322,9 @@ describe('TeamEnvironmentsService', () => {
     });
 
     test('should throw TEAM_ENVIRONMMENT_NOT_FOUND if provided id is invalid', async () => {
-      mockPrisma.teamEnvironment.findFirst.mockRejectedValue('NotFoundError');
+      mockPrisma.teamEnvironment.findFirstOrThrow.mockRejectedValue(
+        'NotFoundError',
+      );
 
       const result = await teamEnvironmentsService.createDuplicateEnvironment(
         teamEnvironment.id,
@@ -332,7 +334,7 @@ describe('TeamEnvironmentsService', () => {
     });
 
     test('should send pubsub message to "team_environment/<teamID>/created" if team environment is updated successfully', async () => {
-      mockPrisma.teamEnvironment.findFirst.mockResolvedValueOnce(
+      mockPrisma.teamEnvironment.findFirstOrThrow.mockResolvedValueOnce(
         teamEnvironment,
       );
 

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

@@ -183,11 +183,10 @@ export class TeamEnvironmentsService {
    */
   async createDuplicateEnvironment(id: string) {
     try {
-      const environment = await this.prisma.teamEnvironment.findFirst({
+      const environment = await this.prisma.teamEnvironment.findFirstOrThrow({
         where: {
           id: id,
         },
-        rejectOnNotFound: true,
       });
 
       const result = await this.prisma.teamEnvironment.create({

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

@@ -42,6 +42,7 @@ const teamCollection: DbTeamCollection = {
   id: 'team-coll-1',
   parentID: null,
   teamID: team.id,
+  data: {},
   title: 'Team Collection 1',
   orderIndex: 1,
   createdOn: new Date(),

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

@@ -1,6 +1,8 @@
+// This interface defines how data will be received from the app when we are importing Hoppscotch collections
 export interface CollectionFolder {
   id?: string;
   folders: CollectionFolder[];
   requests: any[];
   name: string;
+  data?: string;
 }

packages/hoppscotch-backend/src/user-collection/input-type.args.ts

@@ -6,6 +6,13 @@ import { PaginationArgs } from 'src/types/input-types.args';
 export class CreateRootUserCollectionArgs {
   @Field({ name: 'title', description: 'Title of the new user collection' })
   title: string;
+
+  @Field({
+    name: 'data',
+    description: 'JSON string representing the collection data',
+    nullable: true,
+  })
+  data: string;
 }
 @ArgsType()
 export class CreateChildUserCollectionArgs {
@@ -17,6 +24,13 @@ export class CreateChildUserCollectionArgs {
     description: 'ID of the parent to the new user collection',
   })
   parentUserCollectionID: string;
+
+  @Field({
+    name: 'data',
+    description: 'JSON string representing the collection data',
+    nullable: true,
+  })
+  data: string;
 }
 
 @ArgsType()
@@ -95,3 +109,26 @@ export class ImportUserCollectionsFromJSONArgs {
   })
   parentCollectionID?: string;
 }
+
+@ArgsType()
+export class UpdateUserCollectionsArgs {
+  @Field(() => ID, {
+    name: 'userCollectionID',
+    description: 'ID of the user collection',
+  })
+  userCollectionID: string;
+
+  @Field({
+    name: 'newTitle',
+    description: 'The updated title of the user collection',
+    nullable: true,
+  })
+  newTitle: string;
+
+  @Field({
+    name: 'data',
+    description: 'JSON string representing the collection data',
+    nullable: true,
+  })
+  data: string;
+}

packages/hoppscotch-backend/src/user-collection/user-collection.resolver.ts

@@ -30,6 +30,7 @@ import {
   MoveUserCollectionArgs,
   RenameUserCollectionsArgs,
   UpdateUserCollectionArgs,
+  UpdateUserCollectionsArgs,
 } from './input-type.args';
 import { ReqType } from 'src/types/RequestTypes';
 import * as E from 'fp-ts/Either';
@@ -142,7 +143,13 @@ export class UserCollectionResolver {
     );
 
     if (E.isLeft(userCollection)) throwErr(userCollection.left);
-    return userCollection.right;
+    return <UserCollection>{
+      ...userCollection.right,
+      userID: userCollection.right.userUid,
+      data: !userCollection.right.data
+        ? null
+        : JSON.stringify(userCollection.right.data),
+    };
   }
 
   @Query(() => UserCollectionExportJSONData, {
@@ -191,6 +198,7 @@ export class UserCollectionResolver {
       await this.userCollectionService.createUserCollection(
         user,
         args.title,
+        args.data,
         null,
         ReqType.REST,
       );
@@ -212,6 +220,7 @@ export class UserCollectionResolver {
       await this.userCollectionService.createUserCollection(
         user,
         args.title,
+        args.data,
         null,
         ReqType.GQL,
       );
@@ -232,6 +241,7 @@ export class UserCollectionResolver {
       await this.userCollectionService.createUserCollection(
         user,
         args.title,
+        args.data,
         args.parentUserCollectionID,
         ReqType.GQL,
       );
@@ -252,6 +262,7 @@ export class UserCollectionResolver {
       await this.userCollectionService.createUserCollection(
         user,
         args.title,
+        args.data,
         args.parentUserCollectionID,
         ReqType.REST,
       );
@@ -359,6 +370,26 @@ export class UserCollectionResolver {
     return importedCollection.right;
   }
 
+  @Mutation(() => UserCollection, {
+    description: 'Update a UserCollection',
+  })
+  @UseGuards(GqlAuthGuard)
+  async updateUserCollection(
+    @GqlUser() user: AuthUser,
+    @Args() args: UpdateUserCollectionsArgs,
+  ) {
+    const updatedUserCollection =
+      await this.userCollectionService.updateUserCollection(
+        args.newTitle,
+        args.data,
+        args.userCollectionID,
+        user.uid,
+      );
+
+    if (E.isLeft(updatedUserCollection)) throwErr(updatedUserCollection.left);
+    return updatedUserCollection.right;
+  }
+
   // Subscriptions
   @Subscription(() => UserCollection, {
     description: 'Listen for User Collection Creation',

packages/hoppscotch-backend/src/user-collection/user-collection.service.ts

@@ -12,6 +12,7 @@ import {
   USER_NOT_FOUND,
   USER_NOT_OWNER,
   USER_COLL_INVALID_JSON,
+  USER_COLL_DATA_INVALID,
 } from 'src/errors';
 import { PrismaService } from 'src/prisma/prisma.service';
 import { AuthUser } from 'src/types/AuthUser';
@@ -43,8 +44,12 @@ export class UserCollectionService {
    */
   private cast(collection: UserCollection) {
     return <UserCollectionModel>{
-      ...collection,
+      id: collection.id,
+      title: collection.title,
+      type: collection.type,
+      parentID: collection.parentID,
       userID: collection.userUid,
+      data: !collection.data ? null : JSON.stringify(collection.data),
     };
   }
 
@@ -146,7 +151,7 @@ export class UserCollectionService {
       },
     });
 
-    return parent;
+    return !parent ? null : this.cast(parent);
   }
 
   /**
@@ -164,7 +169,7 @@ export class UserCollectionService {
     take: number,
     type: ReqType,
   ) {
-    return this.prisma.userCollection.findMany({
+    const res = await this.prisma.userCollection.findMany({
       where: {
         parentID: collectionID,
         type: type,
@@ -176,6 +181,12 @@ export class UserCollectionService {
       skip: cursor ? 1 : 0,
       cursor: cursor ? { id: cursor } : undefined,
     });
+
+    const childCollections = res.map((childCollection) =>
+      this.cast(childCollection),
+    );
+
+    return childCollections;
   }
 
   /**
@@ -211,12 +222,20 @@ export class UserCollectionService {
   async createUserCollection(
     user: AuthUser,
     title: string,
+    data: string | null = null,
     parentUserCollectionID: string | null,
     type: ReqType,
   ) {
     const isTitleValid = isValidLength(title, this.TITLE_LENGTH);
     if (!isTitleValid) return E.left(USER_COLL_SHORT_TITLE);
 
+    if (data === '') return E.left(USER_COLL_DATA_INVALID);
+    if (data) {
+      const jsonReq = stringToJson(data);
+      if (E.isLeft(jsonReq)) return E.left(USER_COLL_DATA_INVALID);
+      data = jsonReq.right;
+    }
+
     // If creating a child collection
     if (parentUserCollectionID !== null) {
       const parentCollection = await this.getUserCollection(
@@ -251,15 +270,19 @@ export class UserCollectionService {
           },
         },
         parent: isParent,
+        data: data ?? undefined,
         orderIndex: !parentUserCollectionID
           ? (await this.getRootCollectionsCount(user.uid)) + 1
           : (await this.getChildCollectionsCount(parentUserCollectionID)) + 1,
       },
     });
 
-    await this.pubsub.publish(`user_coll/${user.uid}/created`, userCollection);
+    await this.pubsub.publish(
+      `user_coll/${user.uid}/created`,
+      this.cast(userCollection),
+    );
 
-    return E.right(userCollection);
+    return E.right(this.cast(userCollection));
   }
 
   /**
@@ -276,7 +299,7 @@ export class UserCollectionService {
     take: number,
     type: ReqType,
   ) {
-    return this.prisma.userCollection.findMany({
+    const res = await this.prisma.userCollection.findMany({
       where: {
         userUid: user.uid,
         parentID: null,
@@ -289,6 +312,12 @@ export class UserCollectionService {
       skip: cursor ? 1 : 0,
       cursor: cursor ? { id: cursor } : undefined,
     });
+
+    const userCollections = res.map((childCollection) =>
+      this.cast(childCollection),
+    );
+
+    return userCollections;
   }
 
   /**
@@ -307,7 +336,7 @@ export class UserCollectionService {
     take: number,
     type: ReqType,
   ) {
-    return this.prisma.userCollection.findMany({
+    const res = await this.prisma.userCollection.findMany({
       where: {
         userUid: user.uid,
         parentID: userCollectionID,
@@ -317,9 +346,16 @@ export class UserCollectionService {
       skip: cursor ? 1 : 0,
       cursor: cursor ? { id: cursor } : undefined,
     });
+
+    const childCollections = res.map((childCollection) =>
+      this.cast(childCollection),
+    );
+
+    return childCollections;
   }
 
   /**
+   * @deprecated Use updateUserCollection method instead
    * Update the title of a UserCollection
    *
    * @param newTitle The new title of collection
@@ -351,10 +387,10 @@ export class UserCollectionService {
 
       this.pubsub.publish(
         `user_coll/${updatedUserCollection.userUid}/updated`,
-        updatedUserCollection,
+        this.cast(updatedUserCollection),
       );
 
-      return E.right(updatedUserCollection);
+      return E.right(this.cast(updatedUserCollection));
     } catch (error) {
       return E.left(USER_COLL_NOT_FOUND);
     }
@@ -591,10 +627,10 @@ export class UserCollectionService {
 
       this.pubsub.publish(
         `user_coll/${collection.right.userUid}/moved`,
-        updatedCollection.right,
+        this.cast(updatedCollection.right),
       );
 
-      return E.right(updatedCollection.right);
+      return E.right(this.cast(updatedCollection.right));
     }
 
     // destCollectionID != null i.e move into another collection
@@ -642,10 +678,10 @@ export class UserCollectionService {
 
     this.pubsub.publish(
       `user_coll/${collection.right.userUid}/moved`,
-      updatedCollection.right,
+      this.cast(updatedCollection.right),
     );
 
-    return E.right(updatedCollection.right);
+    return E.right(this.cast(updatedCollection.right));
   }
 
   /**
@@ -846,6 +882,7 @@ export class UserCollectionService {
           ...(x.request as Record<string, unknown>), // type casting x.request of type Prisma.JSONValue to an object to enable spread
         };
       }),
+      data: JSON.stringify(collection.right.data),
     };
 
     return E.right(result);
@@ -918,6 +955,7 @@ export class UserCollectionService {
               ...(x.request as Record<string, unknown>), // type casting x.request of type Prisma.JSONValue to an object to enable spread
             };
           }),
+          data: JSON.stringify(parentCollection.right.data),
         }),
         collectionType: parentCollection.right.type,
       });
@@ -971,6 +1009,7 @@ export class UserCollectionService {
           this.generatePrismaQueryObj(f, userID, index + 1, reqType),
         ),
       },
+      data: folder.data ?? undefined,
     };
   }
 
@@ -1040,10 +1079,63 @@ export class UserCollectionService {
       ),
     );
 
-    userCollections.forEach((x) =>
-      this.pubsub.publish(`user_coll/${userID}/created`, x),
+    userCollections.forEach((collection) =>
+      this.pubsub.publish(`user_coll/${userID}/created`, this.cast(collection)),
     );
 
     return E.right(true);
   }
+
+  /**
+   * Update a UserCollection
+   *
+   * @param newTitle The new title of collection
+   * @param userCollectionID The Collection Id
+   * @param userID The User UID
+   * @returns An Either of the updated UserCollection
+   */
+  async updateUserCollection(
+    newTitle: string = null,
+    collectionData: string | null = null,
+    userCollectionID: string,
+    userID: string,
+  ) {
+    if (collectionData === '') return E.left(USER_COLL_DATA_INVALID);
+
+    if (collectionData) {
+      const jsonReq = stringToJson(collectionData);
+      if (E.isLeft(jsonReq)) return E.left(USER_COLL_DATA_INVALID);
+      collectionData = jsonReq.right;
+    }
+
+    if (newTitle != null) {
+      const isTitleValid = isValidLength(newTitle, this.TITLE_LENGTH);
+      if (!isTitleValid) return E.left(USER_COLL_SHORT_TITLE);
+    }
+
+    // Check to see is the collection belongs to the user
+    const isOwner = await this.isOwnerCheck(userCollectionID, userID);
+    if (O.isNone(isOwner)) return E.left(USER_NOT_OWNER);
+
+    try {
+      const updatedUserCollection = await this.prisma.userCollection.update({
+        where: {
+          id: userCollectionID,
+        },
+        data: {
+          data: collectionData ?? undefined,
+          title: newTitle ?? undefined,
+        },
+      });
+
+      this.pubsub.publish(
+        `user_coll/${updatedUserCollection.userUid}/updated`,
+        this.cast(updatedUserCollection),
+      );
+
+      return E.right(this.cast(updatedUserCollection));
+    } catch (error) {
+      return E.left(USER_COLL_NOT_FOUND);
+    }
+  }
 }

packages/hoppscotch-backend/src/user-collection/user-collections.model.ts

@@ -13,6 +13,12 @@ export class UserCollection {
   })
   title: string;
 
+  @Field({
+    description: 'JSON string representing the collection data',
+    nullable: true,
+  })
+  data: string;
+
   @Field(() => ReqType, {
     description: 'Type of the user collection',
   })

packages/hoppscotch-backend/src/user-history/user-history.service.spec.ts

@@ -142,13 +142,15 @@ describe('UserHistoryService', () => {
   });
   describe('createUserHistory', () => {
     test('Should resolve right and create a REST request to users history and return a `UserHistory` object', async () => {
+      const executedOn = new Date();
+
       mockPrisma.userHistory.create.mockResolvedValueOnce({
         userUid: 'abc',
         id: '1',
         request: [{}],
         responseMetadata: [{}],
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       });
 
@@ -158,7 +160,7 @@ describe('UserHistoryService', () => {
         request: JSON.stringify([{}]),
         responseMetadata: JSON.stringify([{}]),
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       };
 
@@ -172,13 +174,15 @@ describe('UserHistoryService', () => {
       ).toEqualRight(userHistory);
     });
     test('Should resolve right and create a GQL request to users history and return a `UserHistory` object', async () => {
+      const executedOn = new Date();
+
       mockPrisma.userHistory.create.mockResolvedValueOnce({
         userUid: 'abc',
         id: '1',
         request: [{}],
         responseMetadata: [{}],
         reqType: ReqType.GQL,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       });
 
@@ -188,7 +192,7 @@ describe('UserHistoryService', () => {
         request: JSON.stringify([{}]),
         responseMetadata: JSON.stringify([{}]),
         reqType: ReqType.GQL,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       };
 
@@ -212,13 +216,15 @@ describe('UserHistoryService', () => {
       ).toEqualLeft(USER_HISTORY_INVALID_REQ_TYPE);
     });
     test('Should create a GQL request to users history and publish a created subscription', async () => {
+      const executedOn = new Date();
+
       mockPrisma.userHistory.create.mockResolvedValueOnce({
         userUid: 'abc',
         id: '1',
         request: [{}],
         responseMetadata: [{}],
         reqType: ReqType.GQL,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       });
 
@@ -228,7 +234,7 @@ describe('UserHistoryService', () => {
         request: JSON.stringify([{}]),
         responseMetadata: JSON.stringify([{}]),
         reqType: ReqType.GQL,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       };
 
@@ -245,13 +251,15 @@ describe('UserHistoryService', () => {
       );
     });
     test('Should create a REST request to users history and publish a created subscription', async () => {
+      const executedOn = new Date();
+
       mockPrisma.userHistory.create.mockResolvedValueOnce({
         userUid: 'abc',
         id: '1',
         request: [{}],
         responseMetadata: [{}],
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       });
 
@@ -261,7 +269,7 @@ describe('UserHistoryService', () => {
         request: JSON.stringify([{}]),
         responseMetadata: JSON.stringify([{}]),
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       };
 
@@ -323,13 +331,15 @@ describe('UserHistoryService', () => {
       ).toEqualLeft(USER_HISTORY_NOT_FOUND);
     });
     test('Should star/unstar a request in the history and publish a updated subscription', async () => {
+      const executedOn = new Date();
+
       mockPrisma.userHistory.findFirst.mockResolvedValueOnce({
         userUid: 'abc',
         id: '1',
         request: [{}],
         responseMetadata: [{}],
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn,
         isStarred: false,
       });
 
@@ -339,7 +349,7 @@ describe('UserHistoryService', () => {
         request: [{}],
         responseMetadata: [{}],
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn,
         isStarred: true,
       });
 
@@ -349,7 +359,7 @@ describe('UserHistoryService', () => {
         request: JSON.stringify([{}]),
         responseMetadata: JSON.stringify([{}]),
         reqType: ReqType.REST,
-        executedOn: new Date(),
+        executedOn,
         isStarred: true,
       };
 

packages/hoppscotch-cli/jest.config.ts

@@ -147,7 +147,7 @@ module.exports = {
   // The glob patterns Jest uses to detect test files
   testMatch: [
     // "**/__tests__/**/*.[jt]s?(x)",
-    "**/src/__tests__/**/*.*.ts",
+    "**/src/__tests__/commands/**/*.*.ts",
   ],
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped

packages/hoppscotch-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoppscotch/cli",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "A CLI to run Hoppscotch test scripts in CI environments.",
   "homepage": "https://hoppscotch.io",
   "main": "dist/index.js",
@@ -10,14 +10,18 @@
   "publishConfig": {
     "access": "public"
   },
+  "engines": {
+    "node": ">=18"
+  },
   "scripts": {
     "build": "pnpm exec tsup",
     "dev": "pnpm exec tsup --watch",
     "debugger": "node debugger.js 9999",
     "prepublish": "pnpm exec tsup",
     "prettier-format": "prettier --config .prettierrc 'src/**/*.ts' --write",
+    "test": "pnpm run build && jest && rm -rf dist",
     "do-typecheck": "pnpm exec tsc --noEmit",
-    "test": "pnpm run build && jest && rm -rf dist"
+    "do-test": "pnpm test"
   },
   "keywords": [
     "cli",
@@ -38,26 +42,24 @@
   "devDependencies": {
     "@hoppscotch/data": "workspace:^",
     "@hoppscotch/js-sandbox": "workspace:^",
-    "@relmify/jest-fp-ts": "^2.0.2",
-    "@swc/core": "^1.2.181",
-    "@types/axios": "^0.14.0",
-    "@types/chalk": "^2.2.0",
-    "@types/commander": "^2.12.2",
-    "@types/jest": "^27.4.1",
-    "@types/lodash": "^4.14.181",
-    "@types/qs": "^6.9.7",
+    "@relmify/jest-fp-ts": "^2.1.1",
+    "@swc/core": "^1.3.92",
+    "@types/jest": "^29.5.5",
+    "@types/lodash": "^4.14.199",
+    "@types/qs": "^6.9.8",
     "axios": "^0.21.4",
-    "chalk": "^4.1.1",
-    "commander": "^8.0.0",
+    "chalk": "^4.1.2",
+    "commander": "^11.0.0",
     "esm": "^3.2.25",
-    "fp-ts": "^2.12.1",
-    "io-ts": "^2.2.16",
-    "jest": "^27.5.1",
+    "fp-ts": "^2.16.1",
+    "io-ts": "^2.2.20",
+    "jest": "^29.7.0",
     "lodash": "^4.17.21",
-    "prettier": "^2.8.4",
-    "qs": "^6.10.3",
-    "ts-jest": "^27.1.4",
-    "tsup": "^5.12.7",
-    "typescript": "^4.6.4"
+    "prettier": "^3.0.3",
+    "qs": "^6.11.2",
+    "ts-jest": "^29.1.1",
+    "tsup": "^7.2.0",
+    "typescript": "^5.2.2",
+    "zod": "^3.22.4"
   }
 }

packages/hoppscotch-cli/src/__tests__/commands/test.spec.ts

@@ -28,7 +28,7 @@ describe("Test 'hopp test <file>' command:", () => {
 
     expect(out).toBe<HoppErrorCode>("UNKNOWN_ERROR");
   });
-  
+
   test("Malformed collection file.", async () => {
     const cmd = `node ./bin/hopp test ${getTestJsonFilePath(
       "malformed-collection2.json"
@@ -106,7 +106,7 @@ describe("Test 'hopp test <file> --env <file>' command:", () => {
     const TESTS_PATH = getTestJsonFilePath("env-flag-tests.json");
     const ENV_PATH = getTestJsonFilePath("env-flag-envs.json");
     const cmd = `node ./bin/hopp test ${TESTS_PATH} --env ${ENV_PATH}`;
-    const { error } = await execAsync(cmd);
+    const { error, stdout } = await execAsync(cmd);
 
     expect(error).toBeNull();
   });
@@ -129,7 +129,6 @@ describe("Test 'hopp test <file> --delay <delay_in_ms>' command:", () => {
     const cmd = `${VALID_TEST_CMD} --delay 'NaN'`;
     const { stderr } = await execAsync(cmd);
     const out = getErrorCode(stderr);
-    console.log("invalid value thing", out)
     expect(out).toBe<HoppErrorCode>("INVALID_ARGUMENT");
   });
 

packages/hoppscotch-cli/src/__tests__/samples/env-flag-envs.json

@@ -1,7 +1,6 @@
 {
   "URL": "https://echo.hoppscotch.io",
   "HOST": "echo.hoppscotch.io",
-  "X-COUNTRY": "IN",
   "BODY_VALUE": "body_value",
   "BODY_KEY": "body_key"
 }

packages/hoppscotch-cli/src/__tests__/samples/env-flag-tests.json

@@ -12,7 +12,7 @@
       "method": "POST",
       "auth": { "authType": "none", "authActive": true },
       "preRequestScript": "",
-      "testScript": "const HOST = pw.env.get(\"HOST\");\nconst UNSET_ENV = pw.env.get(\"UNSET_ENV\");\nconst EXPECTED_URL = \"https://echo.hoppscotch.io\";\nconst URL = pw.env.get(\"URL\");\nconst X_COUNTRY = pw.env.get(\"X-COUNTRY\");\nconst BODY_VALUE = pw.env.get(\"BODY_VALUE\");\n\n// Check JSON response property\npw.test(\"Check headers properties.\", ()=> {\n    pw.expect(pw.response.body.headers.host).toBe(HOST);\n\t   pw.expect(pw.response.body.headers[\"x-country\"]).toBe(X_COUNTRY);  \n});\n\npw.test(\"Check data properties.\", () => {\n\tconst DATA = pw.response.body.data;\n  \n    pw.expect(DATA).toBeType(\"string\");\n    pw.expect(JSON.parse(DATA).body_key).toBe(BODY_VALUE);\n});\n\npw.test(\"Check request URL.\", () => {\n  pw.expect(URL).toBe(EXPECTED_URL);\n})\n\npw.test(\"Check unset ENV.\", () => {\n  pw.expect(UNSET_ENV).toBeType(\"undefined\");\n})",
+      "testScript": "const HOST = pw.env.get(\"HOST\");\nconst UNSET_ENV = pw.env.get(\"UNSET_ENV\");\nconst EXPECTED_URL = \"https://echo.hoppscotch.io\";\nconst URL = pw.env.get(\"URL\");\nconst BODY_VALUE = pw.env.get(\"BODY_VALUE\");\n\n// Check JSON response property\npw.test(\"Check headers properties.\", ()=> {\n    pw.expect(pw.response.body.headers.host).toBe(HOST);\n});\n\npw.test(\"Check data properties.\", () => {\n\tconst DATA = pw.response.body.data;\n  \n    pw.expect(DATA).toBeType(\"string\");\n    pw.expect(JSON.parse(DATA).body_key).toBe(BODY_VALUE);\n});\n\npw.test(\"Check request URL.\", () => {\n  pw.expect(URL).toBe(EXPECTED_URL);\n})\n\npw.test(\"Check unset ENV.\", () => {\n  pw.expect(UNSET_ENV).toBeType(\"undefined\");\n})",
       "body": {
         "contentType": "application/json",
         "body": "{\n  \"<<BODY_KEY>>\":\"<<BODY_VALUE>>\"\n}"

packages/hoppscotch-cli/src/commands/test.ts

@@ -14,10 +14,9 @@ import { isHoppCLIError } from "../utils/checks";
 export const test = (path: string, options: TestCmdOptions) => async () => {
   try {
     const delay = options.delay ? parseDelayOption(options.delay) : 0
-    const envName = options.envName
-    const envs = options.env ? await parseEnvsData(options.env, envName) : <HoppEnvs>{ global: [], selected: [] }
+    const envs = options.env ? await parseEnvsData(options.env) : <HoppEnvs>{ global: [], selected: [] }
     const collections = await parseCollectionData(path)
-    
+
     const report = await collectionsRunner({collections, envs, delay})
     const hasSucceeded = collectionsRunnerResult(report)
     collectionsRunnerExit(hasSucceeded)

packages/hoppscotch-cli/src/handlers/error.ts

@@ -48,12 +48,14 @@ export const handleError = <T extends HoppErrorCode>(error: HoppError<T>) => {
       ERROR_MSG = `Unavailable command: ${error.command}`;
       break;
     case "MALFORMED_ENV_FILE":
+      ERROR_MSG = `The environment file is not of the correct format.`;
+      break;
+    case "BULK_ENV_FILE":
+      ERROR_MSG = `CLI doesn't support bulk environments export.`;
+      break;
     case "MALFORMED_COLLECTION":
       ERROR_MSG = `${error.path}\n${parseErrorData(error.data)}`;
       break;
-    case "ENVIRONMENT_NAME_NOT_FOUND":
-      ERROR_MSG = `\n${parseErrorData(error.data)}`;
-      break;
     case "NO_FILE_PATH":
       ERROR_MSG = `Please provide a hoppscotch-collection file path.`;
       break;
@@ -85,4 +87,4 @@ export const handleError = <T extends HoppErrorCode>(error: HoppError<T>) => {
   if (!S.isEmpty(ERROR_MSG)) {
     console.error(ERROR_CODE, ERROR_MSG);
   }
-};
+};

packages/hoppscotch-cli/src/index.ts

@@ -50,7 +50,6 @@ program
     "path to a hoppscotch collection.json file for CI testing"
   )
   .option("-e, --env <file_path>", "path to an environment variables json file")
-  .option("-eN, --envName <environment_name>","Specific Name of the environment")
   .option(
     "-d, --delay <delay_in_ms>",
     "delay in milliseconds(ms) between consecutive requests within a collection"

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

@@ -33,5 +33,4 @@ export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
   effectiveFinalHeaders: { key: string; value: string; active: boolean }[];
   effectiveFinalParams: { key: string; value: string; active: boolean }[];
   effectiveFinalBody: FormData | string | null;
-  effectiveFinalMaskedURL: string;
 }

packages/hoppscotch-cli/src/options/test/env.ts

@@ -1,50 +1,45 @@
 import { error } from "../../types/errors";
-import { HoppEnvs, HoppEnvPair } from "../../types/request";
+import {
+  HoppEnvs,
+  HoppEnvPair,
+  HoppEnvKeyPairObject,
+  HoppEnvExportObject,
+  HoppBulkEnvExportObject,
+} from "../../types/request";
 import { readJsonFile } from "../../utils/mutators";
-
 /**
  * Parses env json file for given path and validates the parsed env json object.
  * @param path Path of env.json file to be parsed.
- * @param envName Name of the environment that should be used. If undefined first environment is used.
  * @returns For successful parsing we get HoppEnvs object.
  */
-export async function parseEnvsData(path: string, envName: string | undefined) {
-  const contents = await readJsonFile(path)
-  if(!(contents && typeof contents === "object" && Array.isArray(contents))) {
-    throw error({ code: "MALFORMED_ENV_FILE", path, data: null })
+export async function parseEnvsData(path: string) {
+  const contents = await readJsonFile(path);
+  const envPairs: Array<HoppEnvPair> = [];
+  const HoppEnvKeyPairResult = HoppEnvKeyPairObject.safeParse(contents);
+  const HoppEnvExportObjectResult = HoppEnvExportObject.safeParse(contents);
+  const HoppBulkEnvExportObjectResult =
+    HoppBulkEnvExportObject.safeParse(contents);
+
+  // CLI doesnt support bulk environments export.
+  // Hence we check for this case and throw an error if it matches the format.
+  if (HoppBulkEnvExportObjectResult.success) {
+    throw error({ code: "BULK_ENV_FILE", path, data: error });
   }
 
-  const envPairs: Array<HoppEnvPair> = []
-
-  const contentEntries = Object.entries(contents)
-  let environmentFound = false;
-
-  for(const [key, obj] of contentEntries) {
-    if(!(typeof obj === "object" && "name" in obj && "variables" in obj)) {
-      throw error({ code: "MALFORMED_ENV_FILE", path, data: { value: obj } })
-    }
-    if(envName && envName !== obj.name) {
-      continue
-    }
-    environmentFound = true;
-    for(const variable of obj.variables) {
-      if(
-        !(
-          typeof variable === "object" &&
-          "key" in variable &&
-          "value" in variable &&
-          "secret" in variable
-        )
-      ) {
-        throw error({ code: "MALFORMED_ENV_FILE", path, data: { value: variable } });
-      }
-      const { key, value, secret } = variable;
-      envPairs.push({ key: key, value: value, secret: secret });
-    }
-    break
+  //  Checks if the environment file is of the correct format.
+  // If it doesnt match either of them, we throw an error.
+  if (!(HoppEnvKeyPairResult.success || HoppEnvExportObjectResult.success)) {
+    throw error({ code: "MALFORMED_ENV_FILE", path, data: error });
   }
-  if(envName && !environmentFound) {
-    throw error({ code: "ENVIRONMENT_NAME_NOT_FOUND", data: envName });
+
+  if (HoppEnvKeyPairResult.success) {
+    for (const [key, value] of Object.entries(HoppEnvKeyPairResult.data)) {
+      envPairs.push({ key, value });
+    }
+  } else if (HoppEnvExportObjectResult.success) {
+    const { key, value } = HoppEnvExportObjectResult.data.variables[0];
+    envPairs.push({ key, value });
   }
-  return <HoppEnvs>{ global: [], selected: envPairs }
+
+  return <HoppEnvs>{ global: [], selected: envPairs };
 }

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

@@ -1,7 +1,6 @@
 export type TestCmdOptions = {
   env: string | undefined;
   delay: string | undefined;
-  envName: string | undefined;
 };
 
 export type HOPP_ENV_FILE_EXT = "json";

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

@@ -15,7 +15,6 @@ type HoppErrors = {
   FILE_NOT_FOUND: HoppErrorPath;
   UNKNOWN_COMMAND: HoppErrorCmd;
   MALFORMED_COLLECTION: HoppErrorPath & HoppErrorData;
-  ENVIRONMENT_NAME_NOT_FOUND: HoppErrorData;
   NO_FILE_PATH: {};
   PRE_REQUEST_SCRIPT_ERROR: HoppErrorData;
   PARSING_ERROR: HoppErrorData;
@@ -25,6 +24,7 @@ type HoppErrors = {
   REQUEST_ERROR: HoppErrorData;
   INVALID_ARGUMENT: HoppErrorData;
   MALFORMED_ENV_FILE: HoppErrorPath & HoppErrorData;
+  BULK_ENV_FILE: HoppErrorPath & HoppErrorData;
   INVALID_FILE_TYPE: HoppErrorData;
 };
 

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

@@ -1,13 +1,30 @@
 import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data";
 import { TestReport } from "../interfaces/response";
 import { HoppCLIError } from "./errors";
+import { z } from "zod";
 
 export type FormDataEntry = {
   key: string;
   value: string | Blob;
 };
 
-export type HoppEnvPair = { key: string; value: string; secret: boolean };
+export type HoppEnvPair = { key: string; value: string };
+
+export const HoppEnvKeyPairObject = z.record(z.string(), z.string());
+
+// Shape of the single environment export object that is exported from the app.
+export const HoppEnvExportObject = z.object({
+  name: z.string(),
+  variables: z.array(
+    z.object({
+      key: z.string(),
+      value: z.string(),
+    })
+  ),
+});
+
+// Shape of the bulk environment export object that is exported from the app.
+export const HoppBulkEnvExportObject = z.array(HoppEnvExportObject);
 
 export type HoppEnvs = {
   global: HoppEnvPair[];

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

@@ -1,7 +1,7 @@
 import { bold } from "chalk";
 import { groupEnd, group, log } from "console";
 import { handleError } from "../handlers/error";
-import { Method } from "axios";
+import { RequestConfig } from "../interfaces/request";
 import { RequestRunnerResponse, TestReport } from "../interfaces/response";
 import { HoppCLIError } from "../types/errors";
 import {
@@ -172,12 +172,11 @@ export const printFailedTestsReport = (
 export const printRequestRunner = {
   /**
    * Request-runner starting message.
-   * @param requestMethod Provides request's method
-   * @param maskedURL Provides the URL with secrets masked with asterisks
+   * @param requestConfig Provides request's method and url.
    */
-  start: (requestMethod: Method | undefined, maskedURL: string) => {
-    const METHOD = BG_INFO(` ${requestMethod} `);
-    const ENDPOINT = maskedURL;
+  start: (requestConfig: RequestConfig) => {
+    const METHOD = BG_INFO(` ${requestConfig.method} `);
+    const ENDPOINT = requestConfig.url;
 
     process.stdout.write(`${METHOD} ${ENDPOINT}`);
   },

packages/hoppscotch-cli/src/utils/pre-request.ts

@@ -6,23 +6,24 @@ import {
   parseTemplateString,
   parseTemplateStringE,
 } from "@hoppscotch/data";
-import { runPreRequestScript } from "@hoppscotch/js-sandbox";
-import { flow, pipe } from "fp-ts/function";
-import * as TE from "fp-ts/TaskEither";
-import * as E from "fp-ts/Either";
-import * as RA from "fp-ts/ReadonlyArray";
+import { runPreRequestScript } from "@hoppscotch/js-sandbox/node";
 import * as A from "fp-ts/Array";
+import * as E from "fp-ts/Either";
 import * as O from "fp-ts/Option";
+import * as RA from "fp-ts/ReadonlyArray";
+import * as TE from "fp-ts/TaskEither";
+import { flow, pipe } from "fp-ts/function";
 import * as S from "fp-ts/string";
 import qs from "qs";
+
 import { EffectiveHoppRESTRequest } from "../interfaces/request";
-import { error, HoppCLIError } from "../types/errors";
+import { HoppCLIError, error } from "../types/errors";
 import { HoppEnvs } from "../types/request";
-import { isHoppCLIError } from "./checks";
-import { tupleToRecord, arraySort, arrayFlatMap } from "./functions/array";
-import { toFormData } from "./mutators";
-import { getEffectiveFinalMetaData } from "./getters";
 import { PreRequestMetrics } from "../types/response";
+import { isHoppCLIError } from "./checks";
+import { arrayFlatMap, arraySort, tupleToRecord } from "./functions/array";
+import { getEffectiveFinalMetaData } from "./getters";
+import { toFormData } from "./mutators";
 
 /**
  * Runs pre-request-script runner over given request which extracts set ENVs and
@@ -50,9 +51,9 @@ export const preRequestScriptRunner = (
       isHoppCLIError(reason)
         ? reason
         : error({
-          code: "PRE_REQUEST_SCRIPT_ERROR",
-          data: reason,
-        })
+            code: "PRE_REQUEST_SCRIPT_ERROR",
+            data: reason,
+          })
     )
   );
 
@@ -151,12 +152,6 @@ export function getEffectiveRESTRequest(
     request.endpoint,
     envVariables
   );
-
-  const maskedEnvVariables = setAllEnvironmentValuesToAsterisk(envVariables)
-  const _effectiveFinalMaskedURL = parseTemplateStringE(
-    request.endpoint,
-    maskedEnvVariables)
-
   if (E.isLeft(_effectiveFinalURL)) {
     return E.left(
       error({
@@ -166,7 +161,6 @@ export function getEffectiveRESTRequest(
     );
   }
   const effectiveFinalURL = _effectiveFinalURL.right;
-  const effectiveFinalMaskedURL = E.isLeft(_effectiveFinalMaskedURL) ? request.endpoint : _effectiveFinalMaskedURL.right;
 
   return E.right({
     ...request,
@@ -174,7 +168,6 @@ export function getEffectiveRESTRequest(
     effectiveFinalHeaders,
     effectiveFinalParams,
     effectiveFinalBody,
-    effectiveFinalMaskedURL,
   });
 }
 
@@ -250,15 +243,15 @@ function getFinalBodyFromRequest(
       arrayFlatMap((x) =>
         x.isFile
           ? x.value.map((v) => ({
-            key: parseTemplateString(x.key, envVariables),
-            value: v as string | Blob,
-          }))
-          : [
-            {
               key: parseTemplateString(x.key, envVariables),
-              value: parseTemplateString(x.value, envVariables),
-            },
-          ]
+              value: v as string | Blob,
+            }))
+          : [
+              {
+                key: parseTemplateString(x.key, envVariables),
+                value: parseTemplateString(x.value, envVariables),
+              },
+            ]
       ),
       toFormData,
       E.right
@@ -295,22 +288,3 @@ export const getPreRequestMetrics = (
       hasPreReqErrors ? { failed: 1, passed: 0 } : { failed: 0, passed: 1 },
     (scripts) => <PreRequestMetrics>{ scripts, duration }
   );
-
-/**
- * Mask all environment values with asterisks
- * @param variables Environment variable array
- * @returns Environment variable array with masked values
- */
-const setAllEnvironmentValuesToAsterisk = (
-  variables: Environment["variables"]
-): Environment["variables"] => {
-  const envVariables: Environment["variables"] = [];
-  for (const variable of variables) {
-    let value = variable.value
-    if (variable.secret) {
-      value = "******"
-    }
-    envVariables.push({ key: variable.key, secret: variable.secret, value: value })
-  }
-  return envVariables
-}

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

@@ -220,7 +220,6 @@ export const processRequest =
       effectiveFinalHeaders: [],
       effectiveFinalParams: [],
       effectiveFinalURL: "",
-      effectiveFinalMaskedURL:"",
     };
 
     // Executing pre-request-script
@@ -238,8 +237,8 @@ export const processRequest =
 
     // Creating request-config for request-runner.
     const requestConfig = createRequest(effectiveRequest);
-    
-    printRequestRunner.start(requestConfig.method, effectiveRequest.effectiveFinalMaskedURL);
+
+    printRequestRunner.start(requestConfig);
 
     // Default value for request-runner's response.
     let _requestRunnerRes: RequestRunnerResponse = {

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

@@ -1,17 +1,19 @@
 import { HoppRESTRequest } from "@hoppscotch/data";
-import { execTestScript, TestDescriptor } from "@hoppscotch/js-sandbox";
-import { hrtime } from "process";
-import { flow, pipe } from "fp-ts/function";
-import * as RA from "fp-ts/ReadonlyArray";
+import { TestDescriptor } from "@hoppscotch/js-sandbox";
+import { runTestScript } from "@hoppscotch/js-sandbox/node";
 import * as A from "fp-ts/Array";
-import * as TE from "fp-ts/TaskEither";
+import * as RA from "fp-ts/ReadonlyArray";
 import * as T from "fp-ts/Task";
+import * as TE from "fp-ts/TaskEither";
+import { flow, pipe } from "fp-ts/function";
+import { hrtime } from "process";
+
 import {
   RequestRunnerResponse,
   TestReport,
   TestScriptParams,
 } from "../interfaces/response";
-import { error, HoppCLIError } from "../types/errors";
+import { HoppCLIError, error } from "../types/errors";
 import { HoppEnvs } from "../types/request";
 import { ExpectResult, TestMetrics, TestRunnerRes } from "../types/response";
 import { getDurationInSeconds } from "./getters";
@@ -36,7 +38,7 @@ export const testRunner = (
       pipe(
         TE.of(testScriptData),
         TE.chain(({ testScript, response, envs }) =>
-          execTestScript(testScript, envs, response)
+          runTestScript(testScript, envs, response)
         )
       )
     ),

packages/hoppscotch-common/.eslintrc.js

@@ -57,7 +57,7 @@ module.exports = {
       {
         name: "localStorage",
         message:
-          "Do not use 'localStorage' directly. Please use localpersistence.ts functions or stores",
+          "Do not use 'localStorage' directly. Please use the PersistenceService",
       },
     ],
     // window.localStorage block
@@ -66,8 +66,10 @@ module.exports = {
       {
         selector: "CallExpression[callee.object.property.name='localStorage']",
         message:
-          "Do not use 'localStorage' directly. Please use localpersistence.ts functions or stores",
+          "Do not use 'localStorage' directly. Please use the PersistenceService",
       },
     ],
+    eqeqeq: 1,
+    "no-else-return": 1,
   },
 }

packages/hoppscotch-common/.prettierrc.js

@@ -4,5 +4,5 @@ module.exports = {
   singleQuote: false,
   printWidth: 80,
   useTabs: false,
-  tabWidth: 2
+  tabWidth: 2,
 }

packages/hoppscotch-common/assets/icons/graphql.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width=".88em" height="1em" viewBox="0 0 21 24" class="iconify iconify--fontisto"><path fill="currentColor" d="M12.731 2.751 17.666 5.6a2.138 2.138 0 1 1 2.07 3.548l-.015.003v5.7a2.14 2.14 0 1 1-2.098 3.502l-.002-.002-4.905 2.832a2.14 2.14 0 1 1-4.079.054l-.004.015-4.941-2.844a2.14 2.14 0 1 1-2.067-3.556l.015-.003V9.15a2.14 2.14 0 1 1 1.58-3.926l-.01-.005c.184.106.342.231.479.376l.001.001 4.938-2.85a2.14 2.14 0 1 1 4.096.021l.004-.015zm-.515.877a.766.766 0 0 1-.057.057l-.001.001 6.461 11.19c.026-.009.056-.016.082-.023V9.146a2.14 2.14 0 0 1-1.555-2.603l-.003.015.019-.072zm-3.015.059-.06-.06-4.946 2.852A2.137 2.137 0 0 1 2.749 9.12l-.015.004-.076.021v5.708l.084.023 6.461-11.19zm2.076.507a2.164 2.164 0 0 1-1.207-.004l.015.004-6.46 11.189c.286.276.496.629.597 1.026l.003.015h12.911c.102-.413.313-.768.599-1.043l.001-.001L11.28 4.194zm.986 16.227 4.917-2.838a1.748 1.748 0 0 1-.038-.142H4.222l-.021.083 4.939 2.852c.39-.403.936-.653 1.54-.653.626 0 1.189.268 1.581.696l.001.002z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width=".88em" height="1em" viewBox="0 0 21 24"><path fill="currentColor" d="M12.731 2.751 17.666 5.6a2.138 2.138 0 1 1 2.07 3.548l-.015.003v5.7a2.14 2.14 0 1 1-2.098 3.502l-.002-.002-4.905 2.832a2.14 2.14 0 1 1-4.079.054l-.004.015-4.941-2.844a2.14 2.14 0 1 1-2.067-3.556l.015-.003V9.15a2.14 2.14 0 1 1 1.58-3.926l-.01-.005c.184.106.342.231.479.376l.001.001 4.938-2.85a2.14 2.14 0 1 1 4.096.021l.004-.015zm-.515.877a.766.766 0 0 1-.057.057l-.001.001 6.461 11.19c.026-.009.056-.016.082-.023V9.146a2.14 2.14 0 0 1-1.555-2.603l-.003.015.019-.072zm-3.015.059-.06-.06-4.946 2.852A2.137 2.137 0 0 1 2.749 9.12l-.015.004-.076.021v5.708l.084.023 6.461-11.19zm2.076.507a2.164 2.164 0 0 1-1.207-.004l.015.004-6.46 11.189c.286.276.496.629.597 1.026l.003.015h12.911c.102-.413.313-.768.599-1.043l.001-.001L11.28 4.194zm.986 16.227 4.917-2.838a1.748 1.748 0 0 1-.038-.142H4.222l-.021.083 4.939 2.852c.39-.403.936-.653 1.54-.653.626 0 1.189.268 1.581.696l.001.002z"/></svg>

packages/hoppscotch-common/assets/icons/mqtt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10.133 1h4.409a.5.5 0 0 1 .5.5v4.422c0 .026-.035.033-.045.01l-.048-.112a9.095 9.095 0 0 0-4.825-4.776c-.023-.01-.016-.044.01-.044Zm-8.588.275h-.5v1h.5c7.027 0 12.229 5.199 12.229 12.226v.5h1v-.5c0-7.58-5.65-13.226-13.229-13.226Zm.034 4.22h-.5v1h.5c2.361 0 4.348.837 5.744 2.238 1.395 1.401 2.227 3.395 2.227 5.758v.5h1v-.5c0-2.604-.921-4.859-2.52-6.463-1.596-1.605-3.845-2.532-6.45-2.532Zm-.528 8.996v-4.423c0-.041.033-.074.074-.074a4.923 4.923 0 0 1 4.923 4.922.074.074 0 0 1-.074.074H1.551a.5.5 0 0 1-.5-.5Z" clip-rule="evenodd"/></svg>

packages/hoppscotch-common/assets/icons/socketio.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9.277 2.084a.5.5 0 0 1 .185.607l-2.269 5.5a.5.5 0 0 1-.462.309H3.5a.5.5 0 0 1-.354-.854l5.5-5.5a.5.5 0 0 1 .631-.062ZM4.707 7.5h1.69l1.186-2.875L4.707 7.5Zm2.016 6.416a.5.5 0 0 1-.185-.607l2.269-5.5a.5.5 0 0 1 .462-.309H12.5a.5.5 0 0 1 .354.854l-5.5 5.5a.5.5 0 0 1-.631.062Zm4.57-5.416h-1.69l-1.186 2.875L11.293 8.5Z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1 0A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" clip-rule="evenodd"/></svg>

packages/hoppscotch-common/assets/icons/websocket.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M1 2h4.257a2.5 2.5 0 0 1 1.768.732L9.293 5 5 9.293 3.732 8.025A2.5 2.5 0 0 1 3 6.257V4H2v2.257a3.5 3.5 0 0 0 1.025 2.475L5 10.707l1.25-1.25 2.396 2.397.708-.708L6.957 8.75 8.75 6.957l2.396 2.397.708-.708L9.457 6.25 10.707 5 7.732 2.025A3.5 3.5 0 0 0 5.257 1H1v1ZM10.646 2.354l2.622 2.62A2.5 2.5 0 0 1 14 6.744V12h1V6.743a3.5 3.5 0 0 0-1.025-2.475l-2.621-2.622-.707.708ZM4.268 13.975l-2.622-2.621.708-.708 2.62 2.622A2.5 2.5 0 0 0 6.744 14H15v1H6.743a3.5 3.5 0 0 1-2.475-1.025Z"/></svg>

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

@@ -1,7 +1,25 @@
+/*
+* Write hoppscotch-common related custom styles in this file.
+* If styles are sharable across all package then write into hoppscotch-ui/assets/scss/styles.scss file.
+*/
+
 * {
-  @apply backface-hidden;
-  @apply before:backface-hidden;
-  @apply after:backface-hidden;
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+
+  &::before {
+    backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+  }
+
+  &::after {
+    backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+  }
+
   @apply selection:bg-accentDark;
   @apply selection:text-accentContrast;
   @apply overscroll-none;
@@ -15,13 +33,13 @@
 
 ::-webkit-scrollbar-track {
   @apply bg-transparent;
-  @apply border-solid border-l border-dividerLight border-t-0 border-b-0 border-r-0;
+  @apply border-b-0 border-l border-r-0 border-t-0 border-solid border-dividerLight;
 }
 
 ::-webkit-scrollbar-thumb {
   @apply bg-divider bg-clip-content;
   @apply rounded-full;
-  @apply border-solid border-transparent border-4;
+  @apply border-4 border-solid border-transparent;
   @apply hover:bg-dividerDark;
   @apply hover:bg-clip-content;
 }
@@ -39,7 +57,7 @@ input::placeholder,
 textarea::placeholder,
 .cm-placeholder {
   @apply text-secondary;
-  @apply opacity-50;
+  @apply opacity-50 #{!important};
 }
 
 input,
@@ -54,11 +72,11 @@ html {
 
 body {
   @apply bg-primary;
-  @apply text-secondary text-body;
+  @apply text-body text-secondary;
   @apply font-medium;
   @apply select-none;
   @apply overflow-x-hidden;
-  @apply leading-body;
+  @apply leading-body #{!important};
   animation: fade 300ms forwards;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
@@ -124,8 +142,8 @@ a {
 
   &.link {
     @apply items-center;
-    @apply py-0.5 px-1;
-    @apply -my-0.5 -mx-1;
+    @apply px-1 py-0.5;
+    @apply -mx-1 -my-0.5;
     @apply text-accent;
     @apply rounded;
     @apply hover:text-accentDark;
@@ -137,7 +155,7 @@ a {
 
 .cm-tooltip {
   .tippy-box {
-    @apply shadow-none;
+    @apply shadow-none #{!important};
     @apply fixed;
     @apply inline-flex;
     @apply -mt-8;
@@ -154,15 +172,15 @@ a {
     @apply flex;
     @apply text-tiny text-primary;
     @apply font-semibold;
-    @apply py-1 px-2;
+    @apply px-2 py-1;
     @apply truncate;
-    @apply leading-normal;
+    @apply leading-body;
     @apply items-center;
 
     kbd {
       @apply hidden;
       @apply font-sans;
-      @apply bg-gray-500/45;
+      background-color: rgba(107, 114, 128, 0.45);
       @apply text-primaryLight;
       @apply rounded-sm;
       @apply px-1;
@@ -170,6 +188,12 @@ a {
       @apply truncate;
       @apply sm:inline-flex;
     }
+
+    .env-icon {
+      @apply transition;
+      @apply inline-flex;
+      @apply items-center;
+    }
   }
 
   .tippy-svg-arrow {
@@ -195,9 +219,9 @@ a {
     @apply max-h-[45vh];
     @apply items-stretch;
     @apply overflow-y-auto;
-    @apply text-secondary text-body;
+    @apply text-body text-secondary;
     @apply p-2;
-    @apply leading-normal;
+    @apply leading-body;
     @apply focus:outline-none;
     scroll-behavior: smooth;
 
@@ -229,12 +253,12 @@ a {
 
 hr {
   @apply border-b border-dividerLight;
-  @apply my-2;
+  @apply my-2 #{!important};
 }
 
 .heading {
   @apply font-bold;
-  @apply text-secondaryDark text-lg;
+  @apply text-lg text-secondaryDark;
   @apply tracking-tight;
 }
 
@@ -243,7 +267,7 @@ hr {
 .textarea {
   @apply flex;
   @apply w-full;
-  @apply py-2 px-4;
+  @apply px-4 py-2;
   @apply bg-transparent;
   @apply rounded;
   @apply text-secondaryDark;
@@ -284,7 +308,7 @@ button {
   @apply transform;
   @apply origin-top-left;
   @apply scale-75;
-  @apply translate-x-1 -translate-y-4;
+  @apply -translate-y-4 translate-x-1;
 }
 
 .floating-input:focus-within ~ label {
@@ -293,7 +317,7 @@ button {
 
 .floating-input ~ .end-actions {
   @apply absolute;
-  @apply right-0.2;
+  @apply right-[.05rem];
   @apply inset-y-0;
   @apply flex;
   @apply items-center;
@@ -318,44 +342,28 @@ pre.ace_editor {
   }
 }
 
-.select-wrapper {
-  @apply flex flex-1;
-  @apply relative;
-  @apply after:absolute;
-  @apply after:flex;
-  @apply after:inset-y-0;
-  @apply after:items-center;
-  @apply after:justify-center;
-  @apply after:pointer-events-none;
-  @apply after:font-icon;
-  @apply after:text-current;
-  @apply after:right-3;
-  @apply after:content-["\e5cf"];
-  @apply after:text-lg;
-}
-
 .info-response {
-  @apply text-pink-500;
+  color: var(--status-info-color);
 }
 
 .success-response {
-  @apply text-green-500;
+  color: var(--status-success-color);
 }
 
-.redir-response {
-  @apply text-yellow-500;
+.redirect-response {
+  color: var(--status-redirect-color);
 }
 
-.cl-error-response {
-  @apply text-red-500;
+.critical-error-response {
+  color: var(--status-critical-error-color);
 }
 
-.sv-error-response {
-  @apply text-red-600;
+.server-error-response {
+  color: var(--status-server-error-color);
 }
 
 .missing-data-response {
-  @apply text-secondaryLight;
+  color: var(--status-missing-data-color);
 }
 
 .toasted-container {
@@ -366,7 +374,7 @@ pre.ace_editor {
       @apply px-4 py-2;
       @apply bg-tooltip;
       @apply border-secondaryDark;
-      @apply text-primary text-body;
+      @apply text-body text-primary;
       @apply justify-between;
       @apply shadow-lg;
       @apply font-semibold;
@@ -394,7 +402,7 @@ pre.ace_editor {
         @apply before:opacity-10;
         @apply before:inset-0;
         @apply before:transition;
-        @apply before:content-DEFAULT;
+        @apply before:content-[''];
         @apply hover:no-underline;
         @apply hover:before:opacity-20;
       }
@@ -428,7 +436,7 @@ pre.ace_editor {
   @apply before:opacity-0;
   @apply before:z-20;
   @apply before:transition;
-  @apply before:content-DEFAULT;
+  @apply before:content-[''];
   @apply hover:before:opacity-100;
 }
 
@@ -501,32 +509,16 @@ pre.ace_editor {
   }
 }
 
-.cm-panel.cm-search [name="close"] {
-  @apply flex;
-  @apply items-center;
-  @apply justify-center;
-  @apply min-h-5;
-  @apply min-w-5;
-  @apply bg-primaryDark #{!important};
-  @apply sticky #{!important};
-  @apply right-0 #{!important};
-  @apply ml-auto #{!important};
-  @apply my-auto #{!important};
-  @apply rounded #{!important};
-  @apply outline #{!important};
-  @apply outline-divider #{!important};
-}
-
 .shortcut-key {
   @apply inline-flex;
   @apply font-sans;
   @apply text-tiny;
-  @apply bg-divider;
+  @apply bg-dividerLight;
   @apply rounded;
   @apply ml-2;
   @apply px-1;
-  @apply min-w-5;
-  @apply min-h-5;
+  @apply min-w-[1.25rem];
+  @apply min-h-[1.25rem];
   @apply items-center;
   @apply justify-center;
   @apply border border-dividerDark;

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

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

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

@@ -1,274 +0,0 @@
-@mixin base-theme {
-  --font-sans: "Inter Variable", sans-serif;
-  --font-icon: "Material Symbols Rounded Variable";
-  --font-mono: "Roboto Mono Variable", monospace;
-  --font-size-body: 0.75rem;
-  --font-size-tiny: 0.688rem;
-  --line-height-body: 1rem;
-  --upper-primary-sticky-fold: 4.125rem;
-  --upper-secondary-sticky-fold: 6.188rem;
-  --upper-tertiary-sticky-fold: 8.25rem;
-  --upper-fourth-sticky-fold: 10.2rem;
-  --upper-mobile-primary-sticky-fold: 6.625rem;
-  --upper-mobile-secondary-sticky-fold: 8.688rem;
-  --upper-mobile-sticky-fold: 10.75rem;
-  --upper-mobile-tertiary-sticky-fold: 8.25rem;
-  --lower-primary-sticky-fold: 3rem;
-  --lower-secondary-sticky-fold: 5.063rem;
-  --lower-tertiary-sticky-fold: 7.125rem;
-  --lower-fourth-sticky-fold: 9.188rem;
-  --sidebar-primary-sticky-fold: 2rem;
-}
-
-@mixin dark-theme {
-  --primary-color: theme("colors.dark.800");
-  --primary-light-color: theme("colors.dark.600");
-  --primary-dark-color: theme("colors.neutral.800");
-  --primary-contrast-color: theme("colors.neutral.900");
-
-  --secondary-color: theme("colors.neutral.400");
-  --secondary-light-color: theme("colors.neutral.500");
-  --secondary-dark-color: theme("colors.neutral.50");
-
-  --divider-color: theme("colors.neutral.800");
-  --divider-light-color: theme("colors.dark.500");
-  --divider-dark-color: theme("colors.dark.300");
-
-  --error-color: theme("colors.stone.800");
-  --tooltip-color: theme("colors.neutral.100");
-  --popover-color: theme("colors.dark.700");
-  --editor-theme: "merbivore_soft";
-}
-
-@mixin light-theme {
-  --primary-color: theme("colors.white");
-  --primary-light-color: theme("colors.gray.50");
-  --primary-dark-color: theme("colors.gray.100");
-  --primary-contrast-color: theme("colors.light.50");
-
-  --secondary-color: theme("colors.gray.500");
-  --secondary-light-color: theme("colors.gray.400");
-  --secondary-dark-color: theme("colors.gray.900");
-
-  --divider-color: theme("colors.gray.100");
-  --divider-light-color: theme("colors.gray.100");
-  --divider-dark-color: theme("colors.gray.300");
-
-  --error-color: theme("colors.yellow.100");
-  --tooltip-color: theme("colors.neutral.800");
-  --popover-color: theme("colors.white");
-  --editor-theme: "textmate";
-}
-
-@mixin black-theme {
-  --primary-color: theme("colors.dark.900");
-  --primary-light-color: theme("colors.neutral.900");
-  --primary-dark-color: theme("colors.dark.800");
-  --primary-contrast-color: theme("colors.dark.900");
-
-  --secondary-color: theme("colors.neutral.400");
-  --secondary-light-color: theme("colors.neutral.500");
-  --secondary-dark-color: theme("colors.neutral.100");
-
-  --divider-color: theme("colors.dark.600");
-  --divider-light-color: theme("colors.dark.800");
-  --divider-dark-color: theme("colors.dark.200");
-
-  --error-color: theme("colors.stone.900");
-  --tooltip-color: theme("colors.neutral.100");
-  --popover-color: theme("colors.dark.900");
-  --editor-theme: "twilight";
-}
-
-@mixin dark-editor-theme {
-  --editor-type-color: theme("colors.purple.400");
-  --editor-name-color: theme("colors.blue.400");
-  --editor-operator-color: theme("colors.indigo.400");
-  --editor-invalid-color: theme("colors.red.400");
-  --editor-separator-color: theme("colors.gray.400");
-  --editor-meta-color: theme("colors.gray.400");
-  --editor-variable-color: theme("colors.green.400");
-  --editor-link-color: theme("colors.cyan.400");
-  --editor-process-color: theme("colors.fuchsia.400");
-  --editor-constant-color: theme("colors.violet.400");
-  --editor-keyword-color: theme("colors.pink.400");
-}
-
-@mixin light-editor-theme {
-  --editor-type-color: theme("colors.purple.600");
-  --editor-name-color: theme("colors.red.600");
-  --editor-operator-color: theme("colors.indigo.600");
-  --editor-invalid-color: theme("colors.red.600");
-  --editor-separator-color: theme("colors.gray.600");
-  --editor-meta-color: theme("colors.gray.600");
-  --editor-variable-color: theme("colors.green.600");
-  --editor-link-color: theme("colors.cyan.600");
-  --editor-process-color: theme("colors.blue.600");
-  --editor-constant-color: theme("colors.fuchsia.600");
-  --editor-keyword-color: theme("colors.pink.600");
-}
-
-@mixin black-editor-theme {
-  --editor-type-color: theme("colors.purple.400");
-  --editor-name-color: theme("colors.fuchsia.400");
-  --editor-operator-color: theme("colors.indigo.400");
-  --editor-invalid-color: theme("colors.red.400");
-  --editor-separator-color: theme("colors.gray.400");
-  --editor-meta-color: theme("colors.gray.400");
-  --editor-variable-color: theme("colors.green.400");
-  --editor-link-color: theme("colors.cyan.400");
-  --editor-process-color: theme("colors.violet.400");
-  --editor-constant-color: theme("colors.blue.400");
-  --editor-keyword-color: theme("colors.pink.400");
-}
-
-@mixin green-theme {
-  --accent-color: theme("colors.green.500");
-  --accent-light-color: theme("colors.green.400");
-  --accent-dark-color: theme("colors.green.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.green.200");
-  --gradient-via-color: theme("colors.green.400");
-  --gradient-to-color: theme("colors.green.600");
-}
-
-@mixin teal-theme {
-  --accent-color: theme("colors.teal.500");
-  --accent-light-color: theme("colors.teal.400");
-  --accent-dark-color: theme("colors.teal.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.teal.200");
-  --gradient-via-color: theme("colors.teal.400");
-  --gradient-to-color: theme("colors.teal.600");
-}
-
-@mixin blue-theme {
-  --accent-color: theme("colors.blue.500");
-  --accent-light-color: theme("colors.blue.400");
-  --accent-dark-color: theme("colors.blue.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.blue.200");
-  --gradient-via-color: theme("colors.blue.400");
-  --gradient-to-color: theme("colors.blue.600");
-}
-
-@mixin indigo-theme {
-  --accent-color: theme("colors.indigo.500");
-  --accent-light-color: theme("colors.indigo.400");
-  --accent-dark-color: theme("colors.indigo.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.indigo.200");
-  --gradient-via-color: theme("colors.indigo.400");
-  --gradient-to-color: theme("colors.indigo.600");
-}
-
-@mixin purple-theme {
-  --accent-color: theme("colors.purple.500");
-  --accent-light-color: theme("colors.purple.400");
-  --accent-dark-color: theme("colors.purple.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.purple.200");
-  --gradient-via-color: theme("colors.purple.400");
-  --gradient-to-color: theme("colors.purple.600");
-}
-
-@mixin yellow-theme {
-  --accent-color: theme("colors.yellow.500");
-  --accent-light-color: theme("colors.yellow.400");
-  --accent-dark-color: theme("colors.yellow.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.yellow.200");
-  --gradient-via-color: theme("colors.yellow.400");
-  --gradient-to-color: theme("colors.yellow.600");
-}
-
-@mixin orange-theme {
-  --accent-color: theme("colors.orange.500");
-  --accent-light-color: theme("colors.orange.400");
-  --accent-dark-color: theme("colors.orange.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.orange.200");
-  --gradient-via-color: theme("colors.orange.400");
-  --gradient-to-color: theme("colors.orange.600");
-}
-
-@mixin red-theme {
-  --accent-color: theme("colors.red.500");
-  --accent-light-color: theme("colors.red.400");
-  --accent-dark-color: theme("colors.red.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.red.200");
-  --gradient-via-color: theme("colors.red.400");
-  --gradient-to-color: theme("colors.red.600");
-}
-
-@mixin pink-theme {
-  --accent-color: theme("colors.pink.500");
-  --accent-light-color: theme("colors.pink.400");
-  --accent-dark-color: theme("colors.pink.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.pink.200");
-  --gradient-via-color: theme("colors.pink.400");
-  --gradient-to-color: theme("colors.pink.600");
-}
-
-:root {
-  @include base-theme;
-  @include dark-theme;
-  @include dark-editor-theme;
-  @include green-theme;
-}
-
-:root.light {
-  @include light-theme;
-  @include light-editor-theme;
-  color-scheme: light;
-}
-
-:root.dark {
-  @include dark-theme;
-  @include dark-editor-theme;
-  color-scheme: dark;
-}
-
-:root.black {
-  @include black-theme;
-  @include black-editor-theme;
-  color-scheme: dark;
-}
-
-:root[data-accent="blue"] {
-  @include blue-theme;
-}
-
-:root[data-accent="green"] {
-  @include green-theme;
-}
-
-:root[data-accent="teal"] {
-  @include teal-theme;
-}
-
-:root[data-accent="indigo"] {
-  @include indigo-theme;
-}
-
-:root[data-accent="purple"] {
-  @include purple-theme;
-}
-
-:root[data-accent="orange"] {
-  @include orange-theme;
-}
-
-:root[data-accent="pink"] {
-  @include pink-theme;
-}
-
-:root[data-accent="red"] {
-  @include red-theme;
-}
-
-:root[data-accent="yellow"] {
-  @include yellow-theme;
-}

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

@@ -0,0 +1,89 @@
+@mixin green-theme {
+  --accent-color: theme("colors.emerald.500");
+  --accent-light-color: theme("colors.emerald.400");
+  --accent-dark-color: theme("colors.emerald.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.emerald.400");
+  --gradient-via-color: theme("colors.emerald.500");
+  --gradient-to-color: theme("colors.emerald.600");
+}
+
+@mixin teal-theme {
+  --accent-color: theme("colors.teal.500");
+  --accent-light-color: theme("colors.teal.400");
+  --accent-dark-color: theme("colors.teal.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.teal.400");
+  --gradient-via-color: theme("colors.teal.500");
+  --gradient-to-color: theme("colors.teal.600");
+}
+
+@mixin blue-theme {
+  --accent-color: theme("colors.blue.500");
+  --accent-light-color: theme("colors.blue.400");
+  --accent-dark-color: theme("colors.blue.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.blue.400");
+  --gradient-via-color: theme("colors.blue.500");
+  --gradient-to-color: theme("colors.blue.600");
+}
+
+@mixin indigo-theme {
+  --accent-color: theme("colors.indigo.500");
+  --accent-light-color: theme("colors.indigo.400");
+  --accent-dark-color: theme("colors.indigo.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.indigo.400");
+  --gradient-via-color: theme("colors.indigo.500");
+  --gradient-to-color: theme("colors.indigo.600");
+}
+
+@mixin purple-theme {
+  --accent-color: theme("colors.purple.500");
+  --accent-light-color: theme("colors.purple.400");
+  --accent-dark-color: theme("colors.purple.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.purple.400");
+  --gradient-via-color: theme("colors.purple.500");
+  --gradient-to-color: theme("colors.purple.600");
+}
+
+@mixin yellow-theme {
+  --accent-color: theme("colors.amber.500");
+  --accent-light-color: theme("colors.amber.400");
+  --accent-dark-color: theme("colors.amber.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.amber.400");
+  --gradient-via-color: theme("colors.amber.500");
+  --gradient-to-color: theme("colors.amber.600");
+}
+
+@mixin orange-theme {
+  --accent-color: theme("colors.orange.500");
+  --accent-light-color: theme("colors.orange.400");
+  --accent-dark-color: theme("colors.orange.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.orange.400");
+  --gradient-via-color: theme("colors.orange.500");
+  --gradient-to-color: theme("colors.orange.600");
+}
+
+@mixin red-theme {
+  --accent-color: theme("colors.red.500");
+  --accent-light-color: theme("colors.red.400");
+  --accent-dark-color: theme("colors.red.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.red.400");
+  --gradient-via-color: theme("colors.red.500");
+  --gradient-to-color: theme("colors.red.600");
+}
+
+@mixin pink-theme {
+  --accent-color: theme("colors.pink.500");
+  --accent-light-color: theme("colors.pink.400");
+  --accent-dark-color: theme("colors.pink.600");
+  --accent-contrast-color: theme("colors.white");
+  --gradient-from-color: theme("colors.pink.400");
+  --gradient-via-color: theme("colors.pink.500");
+  --gradient-to-color: theme("colors.pink.600");
+}

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

@@ -0,0 +1,140 @@
+@mixin base-theme {
+  --font-sans: "Inter Variable", sans-serif;
+  --font-mono: "Roboto Mono Variable", monospace;
+  --font-size-body: 0.75rem;
+  --font-size-tiny: 0.625rem;
+  --line-height-body: 1rem;
+  --upper-primary-sticky-fold: 4.125rem;
+  --upper-secondary-sticky-fold: 6.188rem;
+  --upper-tertiary-sticky-fold: 8.25rem;
+  --upper-fourth-sticky-fold: 10.2rem;
+  --upper-mobile-primary-sticky-fold: 6.75rem;
+  --upper-mobile-secondary-sticky-fold: 8.813rem;
+  --upper-mobile-sticky-fold: 10.875rem;
+  --upper-mobile-tertiary-sticky-fold: 8.25rem;
+  --lower-primary-sticky-fold: 3rem;
+  --lower-secondary-sticky-fold: 5.063rem;
+  --lower-tertiary-sticky-fold: 7.125rem;
+  --lower-fourth-sticky-fold: 9.188rem;
+  --sidebar-primary-sticky-fold: 2rem;
+}
+
+@mixin light-theme {
+  --primary-color: theme("colors.white");
+  --primary-light-color: theme("colors.gray.50");
+  --primary-dark-color: theme("colors.gray.100");
+  --primary-contrast-color: #fdfdfd;
+
+  --secondary-color: theme("colors.gray.500");
+  --secondary-light-color: theme("colors.gray.400");
+  --secondary-dark-color: theme("colors.gray.900");
+
+  --divider-color: theme("colors.gray.100");
+  --divider-light-color: theme("colors.gray.100");
+  --divider-dark-color: theme("colors.gray.300");
+
+  --banner-info-color: theme("colors.stone.100");
+  --banner-warning-color: theme("colors.yellow.100");
+  --banner-error-color: theme("colors.red.100");
+
+  --tooltip-color: theme("colors.neutral.800");
+  --popover-color: theme("colors.white");
+
+  --method-get-color: theme("colors.green.500");
+  --method-post-color: theme("colors.amber.500");
+  --method-put-color: theme("colors.blue.500");
+  --method-patch-color: theme("colors.purple.500");
+  --method-delete-color: theme("colors.red.500");
+  --method-head-color: theme("colors.lime.500");
+  --method-options-color: theme("colors.pink.500");
+  --method-default-color: theme("colors.gray.500");
+
+  --status-info-color: theme("colors.blue.500");
+  --status-success-color: theme("colors.green.500");
+  --status-redirect-color: theme("colors.amber.500");
+  --status-critical-error-color: theme("colors.red.500");
+  --status-server-error-color: theme("colors.rose.500");
+  --status-missing-data-color: theme("colors.slate.500");
+
+  --editor-theme: "textmate";
+}
+
+@mixin dark-theme {
+  --primary-color: #181818;
+  --primary-light-color: #1c1c1e;
+  --primary-dark-color: theme("colors.neutral.800");
+  --primary-contrast-color: theme("colors.neutral.900");
+
+  --secondary-color: theme("colors.neutral.400");
+  --secondary-light-color: theme("colors.neutral.500");
+  --secondary-dark-color: theme("colors.zinc.50");
+
+  --divider-color: #1f1f1f;
+  --divider-light-color: #1f1f1f;
+  --divider-dark-color: theme("colors.zinc.800");
+
+  --banner-info-color: theme("colors.stone.800");
+  --banner-warning-color: theme("colors.yellow.800");
+  --banner-error-color: theme("colors.red.800");
+
+  --tooltip-color: theme("colors.neutral.100");
+  --popover-color: #1b1b1b;
+
+  --method-get-color: theme("colors.emerald.500");
+  --method-post-color: theme("colors.yellow.500");
+  --method-put-color: theme("colors.sky.500");
+  --method-patch-color: theme("colors.violet.500");
+  --method-delete-color: theme("colors.rose.500");
+  --method-head-color: theme("colors.teal.500");
+  --method-options-color: theme("colors.indigo.500");
+  --method-default-color: theme("colors.neutral.500");
+
+  --status-info-color: theme("colors.blue.500");
+  --status-success-color: theme("colors.green.500");
+  --status-redirect-color: theme("colors.amber.500");
+  --status-critical-error-color: theme("colors.red.500");
+  --status-server-error-color: theme("colors.rose.500");
+  --status-missing-data-color: theme("colors.slate.500");
+
+  --editor-theme: "merbivore_soft";
+}
+
+@mixin black-theme {
+  --primary-color: #0f0f0f;
+  --primary-light-color: theme("colors.neutral.900");
+  --primary-dark-color: #181818;
+  --primary-contrast-color: #0f0f0f;
+
+  --secondary-color: theme("colors.neutral.400");
+  --secondary-light-color: theme("colors.neutral.500");
+  --secondary-dark-color: theme("colors.neutral.50");
+
+  --divider-color: theme("colors.neutral.900");
+  --divider-light-color: theme("colors.neutral.900");
+  --divider-dark-color: theme("colors.zinc.800");
+
+  --banner-info-color: theme("colors.stone.900");
+  --banner-warning-color: theme("colors.yellow.900");
+  --banner-error-color: theme("colors.red.900");
+
+  --tooltip-color: theme("colors.neutral.100");
+  --popover-color: theme("colors.stone.950");
+
+  --method-get-color: theme("colors.emerald.500");
+  --method-post-color: theme("colors.yellow.500");
+  --method-put-color: theme("colors.sky.500");
+  --method-patch-color: theme("colors.violet.500");
+  --method-delete-color: theme("colors.rose.500");
+  --method-head-color: theme("colors.teal.500");
+  --method-options-color: theme("colors.indigo.500");
+  --method-default-color: theme("colors.zinc.500");
+
+  --status-info-color: theme("colors.blue.500");
+  --status-success-color: theme("colors.green.500");
+  --status-redirect-color: theme("colors.amber.500");
+  --status-critical-error-color: theme("colors.red.500");
+  --status-server-error-color: theme("colors.rose.500");
+  --status-missing-data-color: theme("colors.slate.500");
+
+  --editor-theme: "twilight";
+}

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

@@ -0,0 +1,41 @@
+@mixin light-editor-theme {
+  --editor-type-color: theme("colors.violet.600");
+  --editor-name-color: theme("colors.red.600");
+  --editor-operator-color: theme("colors.indigo.600");
+  --editor-invalid-color: theme("colors.red.600");
+  --editor-separator-color: theme("colors.gray.600");
+  --editor-meta-color: theme("colors.gray.600");
+  --editor-variable-color: theme("colors.emerald.600");
+  --editor-link-color: theme("colors.cyan.600");
+  --editor-process-color: theme("colors.blue.600");
+  --editor-constant-color: theme("colors.fuchsia.600");
+  --editor-keyword-color: theme("colors.pink.600");
+}
+
+@mixin dark-editor-theme {
+  --editor-type-color: theme("colors.violet.400");
+  --editor-name-color: theme("colors.blue.400");
+  --editor-operator-color: theme("colors.indigo.400");
+  --editor-invalid-color: theme("colors.red.400");
+  --editor-separator-color: theme("colors.gray.400");
+  --editor-meta-color: theme("colors.gray.400");
+  --editor-variable-color: theme("colors.emerald.400");
+  --editor-link-color: theme("colors.cyan.400");
+  --editor-process-color: theme("colors.fuchsia.400");
+  --editor-constant-color: theme("colors.violet.400");
+  --editor-keyword-color: theme("colors.pink.400");
+}
+
+@mixin black-editor-theme {
+  --editor-type-color: theme("colors.violet.400");
+  --editor-name-color: theme("colors.fuchsia.400");
+  --editor-operator-color: theme("colors.indigo.400");
+  --editor-invalid-color: theme("colors.red.400");
+  --editor-separator-color: theme("colors.gray.400");
+  --editor-meta-color: theme("colors.gray.400");
+  --editor-variable-color: theme("colors.emerald.400");
+  --editor-link-color: theme("colors.cyan.400");
+  --editor-process-color: theme("colors.violet.400");
+  --editor-constant-color: theme("colors.blue.400");
+  --editor-keyword-color: theme("colors.pink.400");
+}

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

@@ -0,0 +1,64 @@
+@import "./base-themes.scss";
+@import "./editor-themes.scss";
+@import "./accent-themes.scss";
+
+:root {
+  @include base-theme;
+  @include dark-theme;
+  @include green-theme;
+  @include dark-editor-theme;
+}
+
+:root.light {
+  @include light-theme;
+  @include light-editor-theme;
+  color-scheme: light;
+}
+
+:root.dark {
+  @include dark-theme;
+  @include dark-editor-theme;
+  color-scheme: dark;
+}
+
+:root.black {
+  @include black-theme;
+  @include black-editor-theme;
+  color-scheme: dark;
+}
+
+:root[data-accent="blue"] {
+  @include blue-theme;
+}
+
+:root[data-accent="green"] {
+  @include green-theme;
+}
+
+:root[data-accent="teal"] {
+  @include teal-theme;
+}
+
+:root[data-accent="indigo"] {
+  @include indigo-theme;
+}
+
+:root[data-accent="purple"] {
+  @include purple-theme;
+}
+
+:root[data-accent="orange"] {
+  @include orange-theme;
+}
+
+:root[data-accent="pink"] {
+  @include pink-theme;
+}
+
+:root[data-accent="red"] {
+  @include red-theme;
+}
+
+:root[data-accent="yellow"] {
+  @include yellow-theme;
+}

packages/hoppscotch-common/locales/de.json

@@ -48,8 +48,7 @@
     "turn_off": "Ausschalten",
     "turn_on": "Einschalten",
     "undo": "Rückgängig machen",
-    "yes": "Ja",
-    "secret": "Als Secret speichern"
+    "yes": "Ja"
   },
   "add": {
     "new": "Neue hinzufügen",
@@ -881,4 +880,4 @@
     "team": "Team Workspace",
     "title": "Workspaces"
   }
-}
+}

packages/hoppscotch-common/locales/en.json

@@ -1,5 +1,6 @@
 {
   "action": {
+    "add": "Add",
     "autoscroll": "Autoscroll",
     "cancel": "Cancel",
     "choose_file": "Choose a file",
@@ -10,6 +11,7 @@
     "connect": "Connect",
     "connecting": "Connecting",
     "copy": "Copy",
+    "create": "Create",
     "delete": "Delete",
     "disconnect": "Disconnect",
     "dismiss": "Dismiss",
@@ -39,6 +41,7 @@
     "scroll_to_top": "Scroll to top",
     "search": "Search",
     "send": "Send",
+    "share": "Share",
     "start": "Start",
     "starting": "Starting",
     "stop": "Stop",
@@ -48,17 +51,36 @@
     "turn_off": "Turn off",
     "turn_on": "Turn on",
     "undo": "Undo",
-    "yes": "Yes",
-    "secret": "Save as secret"
+    "yes": "Yes"
   },
   "add": {
     "new": "Add new",
     "star": "Add star"
   },
+  "cookies": {
+    "modal": {
+      "new_domain_name": "New domain name",
+      "set": "Set a cookie",
+      "cookie_string": "Cookie string",
+      "enter_cookie_string": "Enter cookie string",
+      "cookie_name": "Name",
+      "cookie_value": "Value",
+      "cookie_path": "Path",
+      "cookie_expires": "Expires",
+      "managed_tab": "Managed",
+      "raw_tab": "Raw",
+      "interceptor_no_support": "Your currently selected interceptor does not support cookies. Select a different Interceptor and try again.",
+      "empty_domains": "Domain list is empty",
+      "empty_domain": "Domain is empty",
+      "no_cookies_in_domain": "No cookies set for this domain"
+    }
+  },
   "app": {
     "chat_with_us": "Chat with us",
     "contact_us": "Contact us",
+    "cookies": "Cookies",
     "copy": "Copy",
+    "copy_interface_type": "Copy interface type",
     "copy_user_id": "Copy User Auth Token",
     "developer_option": "Developer options",
     "developer_option_description": "Developer tools which helps in development and maintenance of Hoppscotch.",
@@ -74,6 +96,7 @@
     "keyboard_shortcuts": "Keyboard shortcuts",
     "name": "Hoppscotch",
     "new_version_found": "New version found. Refresh to update.",
+    "open_in_hoppscotch": "Open in Hoppscotch",
     "options": "Options",
     "proxy_privacy_policy": "Proxy privacy policy",
     "reload": "Reload",
@@ -113,18 +136,34 @@
   },
   "authorization": {
     "generate_token": "Generate Token",
+    "graphql_headers": "Authorization Headers are sent as part of the payload to connection_init",
     "include_in_url": "Include in URL",
     "learn": "Learn how",
     "pass_key_by": "Pass by",
     "password": "Password",
     "token": "Token",
     "type": "Authorization Type",
-    "username": "Username"
+    "username": "Username",
+    "oauth": {
+      "token_generation_oidc_discovery_failed": "Failure on token generation: OpenID Connect Discovery Failed",
+      "something_went_wrong_on_token_generation": "Something went wrong on token generation",
+      "redirect_auth_server_returned_error": "Auth Server returned an error state",
+      "redirect_no_auth_code": "No Authorization Code present in the redirect",
+      "redirect_invalid_state": "Invalid State value present in the redirect",
+      "redirect_no_token_endpoint": "No Token Endpoint Defined",
+      "redirect_no_client_id": "No Client ID defined",
+      "redirect_no_client_secret": "No Client Secret Defined",
+      "redirect_no_code_verifier": "No Code Verifier Defined",
+      "redirect_auth_token_request_failed": "Request to get the auth token failed",
+      "redirect_auth_token_request_invalid_response": "Invalid Response from the Token Endpoint when requesting for an auth token",
+      "something_went_wrong_on_oauth_redirect": "Something went wrong during OAuth Redirect"
+    }
   },
   "collection": {
     "created": "Collection created",
     "different_parent": "Cannot reorder collection with different parent",
     "edit": "Edit Collection",
+    "import_or_create": "Import or create a collection",
     "invalid_name": "Please provide a name for the collection",
     "invalid_root_move": "Collection already in the root",
     "moved": "Moved Successfully",
@@ -152,6 +191,7 @@
     "remove_folder": "Are you sure you want to permanently delete this folder?",
     "remove_history": "Are you sure you want to permanently delete all history?",
     "remove_request": "Are you sure you want to permanently delete this request?",
+    "remove_shared_request": "Are you sure you want to permanently delete this shared request?",
     "remove_team": "Are you sure you want to delete this team?",
     "remove_telemetry": "Are you sure you want to opt-out of Telemetry?",
     "request_change": "Are you sure you want to discard current request, unsaved changes will be lost.",
@@ -193,7 +233,8 @@
     "profile": "Login to view your profile",
     "protocols": "Protocols are empty",
     "schema": "Connect to a GraphQL endpoint to view schema",
-    "shortcodes": "Shortcodes are empty",
+    "shared_requests_logout": "Login to view your shared requests or create a new one",
+    "shared_requests": "Shared requests are empty",
     "subscription": "Subscriptions are empty",
     "team_name": "Team name empty",
     "teams": "You don't belong to any teams",
@@ -210,6 +251,7 @@
     "empty_variables": "No variables",
     "global": "Global",
     "global_variables": "Global variables",
+    "import_or_create": "Import or create a environment",
     "invalid_name": "Please provide a name for the environment",
     "list": "Environment variables",
     "my_environments": "My Environments",
@@ -232,9 +274,13 @@
     "variable": "Variable",
     "variable_list": "Variable List"
   },
+  "graphql_collections": {
+    "title": "GraphQL Collections"
+  },
   "error": {
     "browser_support_sse": "This browser doesn't seems to have Server Sent Events support.",
     "check_console_details": "Check console log for details.",
+    "check_how_to_add_origin": "Check how you can add an origin",
     "curl_invalid_format": "cURL is not formatted properly",
     "danger_zone": "Danger zone",
     "delete_account": "Your account is currently an owner in these teams:",
@@ -250,9 +296,12 @@
     "json_prettify_invalid_body": "Couldn't prettify an invalid body, solve json syntax errors and try again",
     "network_error": "There seems to be a network error. Please try again.",
     "network_fail": "Could not send request",
+    "no_collections_to_export": "No collections to export. Please create a collection to get started.",
     "no_duration": "No duration",
+    "no_environments_to_export": "No environments to export. Please create an environment to get started.",
     "no_results_found": "No matches found",
     "page_not_found": "This page could not be found",
+    "please_install_extension": "Please install the extension and add origin to the extension.",
     "proxy_error": "Proxy error",
     "script_fail": "Could not execute pre-request script",
     "something_went_wrong": "Something went wrong",
@@ -263,7 +312,8 @@
     "create_secret_gist": "Create secret Gist",
     "gist_created": "Gist created",
     "require_github": "Login with GitHub to create secret gist",
-    "title": "Export"
+    "title": "Export",
+    "failed": "Something went wrong while exporting"
   },
   "filter": {
     "all": "All",
@@ -300,8 +350,8 @@
     "authorization": "The authorization header will be automatically generated when you send the request.",
     "generate_documentation_first": "Generate documentation first",
     "network_fail": "Unable to reach the API endpoint. Check your network connection or select a different Interceptor and try again.",
-    "offline": "You seem to be offline. Data in this workspace might not be up to date.",
-    "offline_short": "You seem to be offline.",
+    "offline": "You're using Hoppscotch offline. Updates will sync when you're online, based on workspace settings.",
+    "offline_short": "You're using Hoppscotch offline.",
     "post_request_tests": "Test scripts are written in JavaScript, and are run after the response is received.",
     "pre_request_script": "Pre-request scripts are written in JavaScript, and are run before the request is sent.",
     "script_fail": "It seems there is a glitch in the pre-request script. Check the error below and fix the script accordingly.",
@@ -330,6 +380,7 @@
     "from_openapi_description": "Import from OpenAPI specification file (YML/JSON)",
     "from_postman": "Import from Postman",
     "from_postman_description": "Import from Postman collection",
+    "from_file": "Import from File",
     "from_url": "Import from URL",
     "gist_url": "Enter Gist URL",
     "import_from_url_invalid_fetch": "Couldn't get data from the url",
@@ -337,7 +388,14 @@
     "import_from_url_invalid_type": "Unsupported type. accepted values are 'hoppscotch', 'openapi', 'postman', 'insomnia'",
     "import_from_url_success": "Collections Imported",
     "json_description": "Import collections from a Hoppscotch Collections JSON file",
-    "title": "Import"
+    "title": "Import",
+    "hoppscotch_environment": "Hoppscotch Environment",
+    "hoppscotch_environment_description": "Import Hoppscotch Environment JSON file",
+    "postman_environment": "Postman Environment",
+    "postman_environment_description": "Import Postman Environment JSON file",
+    "environments_from_gist": "Import From Gist",
+    "environments_from_gist_description": "Import Hoppscotch Environments From Gist",
+    "gql_collections_from_gist_description": "Import GraphQL Collections From Gist"
   },
   "inspections": {
     "description": "Inspect possible errors",
@@ -374,7 +432,9 @@
     "close_unsaved_tab": "You have unsaved changes",
     "collections": "Collections",
     "confirm": "Confirm",
+    "customize_request": "Customize Request",
     "edit_request": "Edit Request",
+    "share_request": "Share Request",
     "import_export": "Import / Export"
   },
   "mqtt": {
@@ -450,13 +510,14 @@
       "structured": "Structured",
       "text": "Text"
     },
-    "copy_link": "Copy link",
     "different_collection": "Cannot reorder requests from different collections",
     "duplicated": "Request duplicated",
     "duration": "Duration",
     "enter_curl": "Enter cURL command",
     "generate_code": "Generate code",
     "generated_code": "Generated code",
+    "go_to_authorization_tab": "Go to Authorization tab",
+    "go_to_body_tab": "Go to Body tab",
     "header_list": "Header List",
     "invalid_name": "Please provide a name for the request",
     "method": "Method",
@@ -481,6 +542,7 @@
     "saved": "Request saved",
     "share": "Share",
     "share_description": "Share Hoppscotch with your friends",
+    "share_request": "Share Request",
     "stop": "Stop",
     "title": "Request",
     "type": "Request type",
@@ -558,16 +620,34 @@
     "use_experimental_url_bar": "Use experimental URL bar with environment highlighting",
     "user": "User",
     "verified_email": "Verified email",
+    "additional": "Additional Settings",
     "verify_email": "Verify email"
   },
-  "shortcodes": {
-    "actions": "Actions",
-    "created_on": "Created on",
-    "deleted": "Shortcode deleted",
-    "method": "Method",
-    "not_found": "Shortcode not found",
-    "short_code": "Short code",
-    "url": "URL"
+  "shared_requests": {
+    "button": "Button",
+    "button_info": "Create a 'Run in Hoppscotch' button for your website, blog or a README.",
+    "customize": "Customize",
+    "creating_widget": "Creating widget",
+    "copy_html": "Copy HTML",
+    "copy_link": "Copy Link",
+    "copy_markdown": "Copy Markdown",
+    "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",
+    "preview": "Preview",
+    "run_in_hoppscotch": "Run in Hoppscotch",
+    "theme": {
+      "dark": "Dark",
+      "light": "Light",
+      "system": "System",
+      "title": "Theme"
+    }
   },
   "shortcut": {
     "general": {
@@ -597,7 +677,6 @@
       "title": "Others"
     },
     "request": {
-      "copy_request_link": "Copy Request Link",
       "delete_method": "Select DELETE method",
       "get_method": "Select GET method",
       "head_method": "Select HEAD method",
@@ -613,6 +692,7 @@
       "save_to_collections": "Save to Collections",
       "send_request": "Send Request",
       "show_code": "Generate code snippet",
+      "share_request": "Share Request",
       "title": "Request"
     },
     "response": {
@@ -737,6 +817,7 @@
     "connection_failed": "Connection failed",
     "connection_lost": "Connection lost",
     "copied_to_clipboard": "Copied to clipboard",
+    "copied_interface_to_clipboard": "Copied {language} interface type to clipboard",
     "deleted": "Deleted",
     "deprecated": "DEPRECATED",
     "disabled": "Disabled",
@@ -744,9 +825,11 @@
     "disconnected_from": "Disconnected from {name}",
     "docs_generated": "Documentation generated",
     "download_started": "Download started",
+    "download_failed": "Download failed",
     "enabled": "Enabled",
     "file_imported": "File imported",
     "finished_in": "Finished in {duration} ms",
+    "hide": "Hide",
     "history_deleted": "History deleted",
     "linewrap": "Wrap lines",
     "loading": "Loading...",
@@ -757,6 +840,7 @@
     "published_error": "Something went wrong while publishing msg: {topic} to topic: {message}",
     "published_message": "Published message: {message} to topic: {topic}",
     "reconnection_error": "Failed to reconnect",
+    "show": "Show",
     "subscribed_failed": "Failed to subscribe to topic: {topic}",
     "subscribed_success": "Successfully subscribed to topic: {topic}",
     "unsubscribed_failed": "Failed to unsubscribe from topic: {topic}",
@@ -792,6 +876,7 @@
     "queries": "Queries",
     "query": "Query",
     "schema": "Schema",
+    "shared_requests": "Shared Requests",
     "socketio": "Socket.IO",
     "sse": "SSE",
     "tests": "Tests",
@@ -838,7 +923,7 @@
     "new": "New Team",
     "new_created": "New team created",
     "new_name": "My New Team",
-    "no_access": "You do not have edit access to these collections",
+    "no_access": "You do not have edit access to this team",
     "no_invite_found": "Invitation not found. Contact your team owner.",
     "no_request_found": "Request not found.",
     "not_found": "Team not found. Contact your team owner.",

packages/hoppscotch-common/locales/tw.json

@@ -5,7 +5,7 @@
     "choose_file": "選擇一個檔案",
     "clear": "清除",
     "clear_all": "全部清除",
-    "clear_history": "Clear all History",
+    "clear_history": "清除所有歷史記錄",
     "close": "關閉",
     "connect": "連線",
     "connecting": "正在連接",
@@ -79,8 +79,8 @@
     "search": "搜尋",
     "share": "分享",
     "shortcuts": "快捷方式",
-    "social_description": "Follow us on social media to stay updated with the latest news, updates and releases.",
-    "social_links": "Social links",
+    "social_description": "在社交媒體上追蹤我們即可在第一時間得知新聞、更新、以及新版本的消息。",
+    "social_links": "社群連結",
     "spotlight": "聚光燈",
     "status": "狀態",
     "status_description": "檢查網站狀態",
@@ -135,15 +135,15 @@
     "renamed": "集合已重新命名",
     "request_in_use": "請求正在使用中",
     "save_as": "另存為",
-    "save_to_collection": "Save to Collection",
+    "save_to_collection": "儲存到集合",
     "select": "選擇一個集合",
     "select_location": "選擇位置",
     "select_team": "選擇一個團隊",
     "team_collections": "團隊集合"
   },
   "confirm": {
-    "close_unsaved_tab": "Are you sure you want to close this tab?",
-    "close_unsaved_tabs": "Are you sure you want to close all tabs? {count} unsaved tabs will be lost.",
+    "close_unsaved_tab": "您確定要關閉此分頁嗎？",
+    "close_unsaved_tabs": "您確定要關閉所有分頁嗎？{count} 個未儲存的分頁將會遺失。",
     "exit_team": "您確定要離開此團隊嗎？",
     "logout": "您確定要登出嗎？",
     "remove_collection": "您確定要永久刪除該集合嗎？",
@@ -158,9 +158,9 @@
     "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": "設為變數"
   },
   "count": {
     "header": "請求標頭 {count}",
@@ -204,31 +204,31 @@
     "create_new": "建立新環境",
     "created": "已建立環境",
     "deleted": "刪除環境",
-    "duplicated": "Environment duplicated",
+    "duplicated": "已複製環境",
     "edit": "編輯環境",
-    "empty_variables": "No variables",
-    "global": "Global",
-    "global_variables": "Global variables",
+    "empty_variables": "無變數",
+    "global": "全域",
+    "global_variables": "全域變數",
     "invalid_name": "請提供有效的環境名稱",
-    "list": "Environment variables",
+    "list": "環境變數",
     "my_environments": "我的環境",
-    "name": "Name",
+    "name": "名稱",
     "nested_overflow": "巢狀環境變數不得大於 10 層",
     "new": "建立環境",
-    "no_active_environment": "No active environment",
+    "no_active_environment": "無使用中的環境",
     "no_environment": "無環境",
     "no_environment_description": "未選取任何環境。請選擇要對以下變數進行的動作。",
-    "quick_peek": "Environment Quick Peek",
-    "replace_with_variable": "Replace with variable",
-    "scope": "Scope",
+    "quick_peek": "快速預覽環境",
+    "replace_with_variable": "以變數替代",
+    "scope": "範圍",
     "select": "選擇環境",
-    "set": "Set environment",
-    "set_as_environment": "Set as environment",
+    "set": "設定環境",
+    "set_as_environment": "設為環境",
     "team_environments": "團隊環境",
     "title": "環境",
     "updated": "更新環境",
-    "value": "Value",
-    "variable": "Variable",
+    "value": "數值",
+    "variable": "變數",
     "variable_list": "變數列表"
   },
   "error": {
@@ -252,7 +252,7 @@
     "no_duration": "無持續時間",
     "no_results_found": "找不到結果",
     "page_not_found": "找不到此頁面",
-    "proxy_error": "Proxy error",
+    "proxy_error": "Proxy 錯誤",
     "script_fail": "無法執行預請求指令碼",
     "something_went_wrong": "發生了一些錯誤",
     "test_script_fail": "無法執行測試指令碼"
@@ -278,13 +278,13 @@
     "renamed": "資料夾已重新命名"
   },
   "graphql": {
-    "connection_switch_confirm": "Do you want to connect with the latest GraphQL endpoint?",
-    "connection_switch_new_url": "Switching to a tab will disconnected you from the active GraphQL connection. New connection URL is",
-    "connection_switch_url": "You're connected to a GraphQL endpoint the connection URL is",
+    "connection_switch_confirm": "您要使用最新的 GraphQL 端點連線嗎？",
+    "connection_switch_new_url": "切換至分頁將斷開使用中的 GraphQL 連線。新的連線網址為 ",
+    "connection_switch_url": "您已連接至 GraphQL 端點。連線網址為 ",
     "mutations": "變體",
     "schema": "綱要",
     "subscriptions": "訂閱",
-    "switch_connection": "Switch connection"
+    "switch_connection": "切換連線"
   },
   "group": {
     "time": "時間",
@@ -339,27 +339,27 @@
     "title": "匯入"
   },
   "inspections": {
-    "description": "Inspect possible errors",
+    "description": "檢查潛在錯誤",
     "environment": {
-      "add_environment": "Add to Environment",
-      "not_found": "Environment variable “{environment}” not found."
+      "add_environment": "新增至環境",
+      "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": "瀏覽器不允許 Hoppscotch 設定 Cookie 標頭。在我們推出 Hoppscotch 桌面版前，請先使用 Authorization 標頭。"
     },
     "response": {
-      "401_error": "Please check your authentication credentials.",
-      "404_error": "Please check your request URL and method type.",
-      "cors_error": "Please check your Cross-Origin Resource Sharing configuration.",
-      "default_error": "Please check your request.",
-      "network_error": "Please check your network connection."
+      "401_error": "請檢查您的授權認證。",
+      "404_error": "請檢查您的請求網址和方式類型。",
+      "cors_error": "請檢查您的跨來源資源共用設定。",
+      "default_error": "請檢查您的請求。",
+      "network_error": "請檢查您的網路連線。"
     },
-    "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": "請確認您是否已將 API 端點的來源加入 Hoppscotch 擴充套件的清單。",
+      "extention_enable_action": "啟用瀏覽器擴充套件",
+      "extention_not_enabled": "未啟用擴充套件。"
     }
   },
   "layout": {
@@ -472,7 +472,7 @@
     "payload": "負載",
     "query": "查詢",
     "raw_body": "原始請求本體",
-    "rename": "Rename Request",
+    "rename": "重新命名請求",
     "renamed": "請求已重新命名",
     "run": "執行",
     "save": "儲存",
@@ -510,7 +510,7 @@
     "accent_color": "強調色",
     "account": "帳號",
     "account_deleted": "已刪除您的帳號",
-    "account_description": "自定義您的帳號設定。",
+    "account_description": "自訂您的帳號設定。",
     "account_email_description": "您的主要電子郵件地址。",
     "account_name_description": "這是您的顯示名稱。",
     "background": "背景",
@@ -542,7 +542,7 @@
     "read_the": "閱讀",
     "reset_default": "重置為預設",
     "short_codes": "快捷碼",
-    "short_codes_description": "我們為您打造的快捷碼。",
+    "short_codes_description": "您建立的快捷碼。",
     "sidebar_on_left": "左側邊欄",
     "sync": "同步",
     "sync_collections": "集合",
@@ -551,9 +551,9 @@
     "sync_history": "歷史",
     "system_mode": "系統",
     "telemetry": "遙測服務",
-    "telemetry_helps_us": "遙測服務幫助我們進行個性化操作，為您提供最佳體驗。",
+    "telemetry_helps_us": "遙測服務能夠幫助我們進行個人化操作，為您提供最佳體驗。",
     "theme": "主題",
-    "theme_description": "自定義您的應用程式主題。",
+    "theme_description": "自訂您的應用程式主題。",
     "use_experimental_url_bar": "使用帶有環境醒目標示的實驗性網址欄",
     "user": "使用者",
     "verified_email": "已確認電子郵件地址",
@@ -592,26 +592,26 @@
       "title": "導航"
     },
     "others": {
-      "prettify": "Prettify Editor's Content",
-      "title": "Others"
+      "prettify": "美化編輯器的內容",
+      "title": "其他"
     },
     "request": {
       "copy_request_link": "複製請求連結",
       "delete_method": "選擇 DELETE 方法",
       "get_method": "選擇 GET 方法",
       "head_method": "選擇 HEAD 方法",
-      "import_curl": "Import cURL",
+      "import_curl": "匯入 cURL",
       "method": "方法",
       "next_method": "選擇下一個方法",
       "post_method": "選擇 POST 方法",
       "previous_method": "選擇上一個方法",
       "put_method": "選擇 PUT 方法",
-      "rename": "Rename Request",
+      "rename": "重新命名請求",
       "reset_request": "重置請求",
-      "save_request": "Save Request",
+      "save_request": "儲存請求",
       "save_to_collections": "儲存到集合",
       "send_request": "傳送請求",
-      "show_code": "Generate code snippet",
+      "show_code": "產生程式碼片段",
       "title": "請求"
     },
     "response": {
@@ -642,82 +642,82 @@
     "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": "雜項"
     },
     "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": {
@@ -777,11 +777,11 @@
   "tab": {
     "authorization": "授權",
     "body": "請求本體",
-    "close": "Close Tab",
-    "close_others": "Close other Tabs",
+    "close": "關閉分頁",
+    "close_others": "關閉其他分頁",
     "collections": "集合",
     "documentation": "幫助文件",
-    "duplicate": "Duplicate Tab",
+    "duplicate": "複製分頁",
     "environments": "環境",
     "headers": "請求標頭",
     "history": "歷史記錄",

packages/hoppscotch-common/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/common",
   "private": true,
-  "version": "2023.8.1",
+  "version": "2023.8.4-1",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
     "test": "vitest --run",
@@ -17,51 +17,46 @@
     "postinstall": "pnpm run gql-codegen",
     "do-test": "pnpm run test",
     "do-lint": "pnpm run prod-lint",
-    "do-typecheck": "pnpm run lint",
+    "do-typecheck": "node type-check.mjs",
     "do-lintfix": "pnpm run lintfix"
   },
   "dependencies": {
     "@apidevtools/swagger-parser": "^10.1.0",
-    "@codemirror/autocomplete": "^6.9.0",
-    "@codemirror/commands": "^6.2.4",
-    "@codemirror/lang-javascript": "^6.1.9",
+    "@codemirror/autocomplete": "^6.11.0",
+    "@codemirror/commands": "^6.3.0",
+    "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-xml": "^6.0.2",
-    "@codemirror/language": "^6.9.0",
+    "@codemirror/language": "6.9.2",
     "@codemirror/legacy-modes": "^6.3.3",
-    "@codemirror/lint": "^6.4.0",
-    "@codemirror/search": "^6.5.1",
-    "@codemirror/state": "^6.2.1",
-    "@codemirror/view": "^6.16.0",
-    "@fontsource-variable/inter": "^5.0.8",
-    "@fontsource-variable/material-symbols-rounded": "^5.0.7",
-    "@fontsource-variable/roboto-mono": "^5.0.9",
+    "@codemirror/lint": "^6.4.2",
+    "@codemirror/search": "^6.5.4",
+    "@codemirror/state": "^6.3.1",
+    "@codemirror/view": "^6.22.0",
     "@hoppscotch/codemirror-lang-graphql": "workspace:^",
     "@hoppscotch/data": "workspace:^",
     "@hoppscotch/js-sandbox": "workspace:^",
     "@hoppscotch/ui": "workspace:^",
     "@hoppscotch/vue-toasted": "^0.1.0",
-    "@lezer/highlight": "^1.1.6",
-    "@sentry/tracing": "^7.64.0",
-    "@sentry/vue": "^7.64.0",
-    "@urql/core": "^4.1.1",
+    "@lezer/highlight": "1.2.0",
+    "@unhead/vue": "^1.8.8",
+    "@urql/core": "^4.2.0",
     "@urql/devtools": "^2.0.3",
     "@urql/exchange-auth": "^2.1.6",
-    "@urql/exchange-graphcache": "^6.3.2",
+    "@urql/exchange-graphcache": "^6.3.3",
     "@vitejs/plugin-legacy": "^4.1.1",
-    "@vueuse/core": "^10.3.0",
-    "@vueuse/head": "^1.3.1",
-    "acorn-walk": "^8.2.0",
-    "axios": "^1.4.0",
+    "@vueuse/core": "^10.6.1",
+    "acorn-walk": "^8.3.0",
+    "axios": "^1.6.2",
     "buffer": "^6.0.3",
+    "cookie-es": "^1.0.0",
     "dioc": "workspace:^",
     "esprima": "^4.0.1",
     "events": "^3.3.0",
     "fp-ts": "^2.16.1",
-    "fuse.js": "^6.6.2",
     "globalthis": "^1.0.3",
-    "graphql": "^16.8.0",
-    "graphql-language-service-interface": "^2.9.1",
+    "graphql": "^16.8.1",
+    "graphql-language-service-interface": "^2.10.2",
     "graphql-tag": "^2.12.6",
     "httpsnippet": "^3.0.1",
     "insomnia-importers": "^3.6.0",
@@ -69,15 +64,18 @@
     "js-yaml": "^4.1.0",
     "jsonpath-plus": "^7.2.0",
     "lodash-es": "^4.17.21",
-    "lossless-json": "^2.0.11",
-    "minisearch": "^6.1.0",
+    "lossless-json": "^3.0.2",
+    "minisearch": "^6.3.0",
     "nprogress": "^0.2.0",
     "paho-mqtt": "^1.1.0",
     "path": "^0.12.7",
-    "postman-collection": "^4.2.0",
+    "postman-collection": "^4.3.0",
     "process": "^0.11.10",
     "qs": "^6.11.2",
+    "quicktype-core": "^23.0.79",
     "rxjs": "^7.8.1",
+    "set-cookie-parser": "^2.6.0",
+    "set-cookie-parser-es": "^1.0.5",
     "socket.io-client-v2": "npm:socket.io-client@^2.4.0",
     "socket.io-client-v3": "npm:socket.io-client@^3.1.3",
     "socket.io-client-v4": "npm:socket.io-client@^4.4.1",
@@ -88,19 +86,21 @@
     "tern": "^0.24.3",
     "timers": "^0.1.1",
     "tippy.js": "^6.3.7",
-    "url": "^0.11.1",
+    "url": "^0.11.3",
     "util": "^0.12.5",
-    "uuid": "^9.0.0",
-    "vue": "^3.3.4",
-    "vue-i18n": "^9.2.2",
-    "vue-pdf-embed": "^1.1.6",
-    "vue-router": "^4.2.4",
+    "verzod": "^0.2.0",
+    "uuid": "^9.0.1",
+    "vue": "^3.3.8",
+    "vue-i18n": "^9.7.1",
+    "vue-pdf-embed": "^1.2.1",
+    "vue-router": "^4.2.5",
     "vue-tippy": "6.3.1",
     "vuedraggable-es": "^4.1.1",
     "wonka": "^6.3.4",
     "workbox-window": "^7.0.0",
-    "xml-formatter": "^3.5.0",
-    "yargs-parser": "^21.1.1"
+    "xml-formatter": "^3.6.0",
+    "yargs-parser": "^21.1.1",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
@@ -110,53 +110,58 @@
     "@graphql-codegen/typed-document-node": "^5.0.1",
     "@graphql-codegen/typescript": "^4.0.1",
     "@graphql-codegen/typescript-operations": "^4.0.1",
-    "@graphql-codegen/typescript-urql-graphcache": "^2.4.5",
-    "@graphql-codegen/urql-introspection": "^2.2.1",
+    "@graphql-codegen/typescript-urql-graphcache": "^3.0.0",
+    "@graphql-codegen/urql-introspection": "^3.0.0",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@iconify-json/lucide": "^1.1.119",
+    "@iconify-json/lucide": "^1.1.141",
     "@intlify/vite-plugin-vue-i18n": "^7.0.0",
     "@relmify/jest-fp-ts": "^2.1.1",
-    "@rushstack/eslint-patch": "^1.3.3",
-    "@types/har-format": "^1.2.12",
-    "@types/js-yaml": "^4.0.5",
-    "@types/lodash-es": "^4.17.8",
-    "@types/lossless-json": "^1.0.1",
-    "@types/nprogress": "^0.2.0",
-    "@types/paho-mqtt": "^1.0.7",
-    "@types/postman-collection": "^3.5.7",
-    "@types/splitpanes": "^2.2.1",
-    "@types/uuid": "^9.0.2",
-    "@types/yargs-parser": "^21.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.4.0",
-    "@typescript-eslint/parser": "^6.4.0",
-    "@vitejs/plugin-vue": "^4.3.1",
-    "@vue/compiler-sfc": "^3.3.4",
-    "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/runtime-core": "^3.3.4",
+    "@rushstack/eslint-patch": "^1.6.0",
+    "@types/har-format": "^1.2.15",
+    "@types/js-yaml": "^4.0.9",
+    "@types/lodash-es": "^4.17.12",
+    "@types/lossless-json": "^1.0.4",
+    "@types/nprogress": "^0.2.3",
+    "@types/paho-mqtt": "^1.0.10",
+    "@types/postman-collection": "^3.5.10",
+    "@types/splitpanes": "^2.2.6",
+    "@types/uuid": "^9.0.7",
+    "@types/yargs-parser": "^21.0.3",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
+    "@vitejs/plugin-vue": "^4.5.0",
+    "@vue/compiler-sfc": "^3.3.8",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/runtime-core": "^3.3.8",
+    "autoprefixer": "^10.4.14",
     "cross-env": "^7.0.3",
     "dotenv": "^16.3.1",
-    "eslint": "^8.47.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint": "^8.54.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-vue": "^9.18.1",
+    "glob": "^10.3.10",
     "npm-run-all": "^4.1.5",
     "openapi-types": "^12.1.3",
-    "rollup-plugin-polyfill-node": "^0.12.0",
-    "sass": "^1.66.0",
-    "typescript": "^5.1.6",
-    "unplugin-fonts": "^1.0.3",
-    "unplugin-icons": "^0.16.5",
-    "unplugin-vue-components": "^0.25.1",
-    "vite": "^4.4.9",
-    "vite-plugin-checker": "^0.6.1",
+    "postcss": "^8.4.23",
+    "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.7",
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "sass": "^1.69.5",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.3.2",
+    "unplugin-fonts": "^1.1.1",
+    "unplugin-icons": "^0.17.4",
+    "unplugin-vue-components": "^0.25.2",
+    "vite": "^4.5.0",
+    "vite-plugin-checker": "^0.6.2",
+    "vite-plugin-fonts": "^0.7.0",
     "vite-plugin-html-config": "^1.0.11",
-    "vite-plugin-inspect": "^0.7.38",
+    "vite-plugin-inspect": "^0.7.42",
     "vite-plugin-pages": "^0.31.0",
     "vite-plugin-pages-sitemap": "^1.6.1",
-    "vite-plugin-pwa": "^0.16.4",
+    "vite-plugin-pwa": "^0.17.0",
     "vite-plugin-vue-layouts": "^0.8.0",
-    "vite-plugin-windicss": "^1.9.1",
-    "vitest": "^0.34.2",
-    "vue-tsc": "^1.8.8",
-    "windicss": "^3.5.6"
+    "vitest": "^0.34.6",
+    "vue-tsc": "^1.8.22"
   }
-}
+}

packages/hoppscotch-common/public/badge-dark.svg

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

packages/hoppscotch-common/public/badge-light.svg

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