fix (common): address mock server issues and improve the UI (hoppscotch#5517)

Co-authored-by: nivedin <[email protected]>
Co-authored-by: jamesgeorge007 <[email protected]>
Co-authored-by: mirarifhasan <[email protected]>

Author: 4 people

packages/hoppscotch-backend/src/mock-server/mock-server.model.ts

@@ -18,10 +18,10 @@ import {
 import { WorkspaceType } from 'src/types/WorkspaceTypes';
 
 // Regex pattern for mock server name validation
-// Allows letters, numbers, spaces, dots, underscores, and hyphens
-const MOCK_SERVER_NAME_PATTERN = /^[a-zA-Z0-9 ._-]+$/;
+// Allows letters, numbers, spaces, dots, brackets, underscores, and hyphens
+const MOCK_SERVER_NAME_PATTERN = /^[a-zA-Z0-9 .()[\]{}<>_-]+$/;
 const MOCK_SERVER_NAME_ERROR_MESSAGE =
-  'Name can only contain letters, numbers, spaces, dots, underscores, and hyphens';
+  'Name can only contain letters, numbers, spaces, dots, brackets, underscores, and hyphens';
 
 @ObjectType()
 export class MockServer {

packages/hoppscotch-backend/src/mock-server/mock-server.resolver.ts

@@ -55,11 +55,12 @@ export class MockServerResolver {
   }
 
   @ResolveField(() => MockServerCollection, {
+    nullable: true,
     description: 'Returns the collection of the mock server',
   })
   async collection(
     @Parent() mockServer: MockServer,
-  ): Promise<MockServerCollection> {
+  ): Promise<MockServerCollection | null> {
     const collection = await this.mockServerService.getMockServerCollection(
       mockServer.id,
     );

packages/hoppscotch-backend/src/mock-server/mock-server.service.spec.ts

@@ -335,17 +335,17 @@ describe('MockServerService', () => {
       }
     });
 
-    test('should return error when collection not found', async () => {
+    test('should return null when collection not found', async () => {
       mockPrisma.mockServer.findUnique.mockResolvedValue(dbMockServer);
       mockPrisma.userCollection.findUnique.mockResolvedValue(null);
 
       const result = await mockServerService.getMockServerCollection(
         dbMockServer.id,
       );
 
-      expect(E.isLeft(result)).toBe(true);
-      if (E.isLeft(result)) {
-        expect(result.left).toBe(MOCK_SERVER_INVALID_COLLECTION);
+      expect(E.isRight(result)).toBe(true);
+      if (E.isRight(result)) {
+        expect(result.right).toBe(null);
       }
     });
   });
@@ -863,6 +863,7 @@ describe('MockServerService', () => {
     } as any;
 
     test('should return example by ID header', async () => {
+      mockPrisma.userCollection.findUnique.mockResolvedValue(userCollection);
       mockPrisma.userCollection.findMany.mockResolvedValue([]); // No child collections
       mockPrisma.userRequest.findMany.mockResolvedValue([userRequest] as any);
 
@@ -882,6 +883,7 @@ describe('MockServerService', () => {
     });
 
     test('should return example by name header', async () => {
+      mockPrisma.userCollection.findUnique.mockResolvedValue(userCollection);
       mockPrisma.userCollection.findMany.mockResolvedValue([]); // No child collections
       mockPrisma.userRequest.findMany.mockResolvedValue([userRequest] as any);
 
@@ -915,6 +917,7 @@ describe('MockServerService', () => {
         },
       };
 
+      mockPrisma.userCollection.findUnique.mockResolvedValue(userCollection);
       mockPrisma.userCollection.findMany.mockResolvedValue([]); // No child collections
       mockPrisma.userRequest.findMany.mockResolvedValue([
         requestWith404,
@@ -936,6 +939,7 @@ describe('MockServerService', () => {
     });
 
     test('should match exact path', async () => {
+      mockPrisma.userCollection.findUnique.mockResolvedValue(userCollection);
       mockPrisma.userRequest.findMany.mockResolvedValue([userRequest] as any);
       mockPrisma.userCollection.findMany.mockResolvedValue([]);
 
@@ -964,6 +968,7 @@ describe('MockServerService', () => {
         },
       };
 
+      mockPrisma.userCollection.findUnique.mockResolvedValue(userCollection);
       mockPrisma.userRequest.findMany.mockResolvedValue([
         variableRequest,
       ] as any);
@@ -979,6 +984,7 @@ describe('MockServerService', () => {
     });
 
     test('should return error when no examples found', async () => {
+      mockPrisma.userCollection.findUnique.mockResolvedValue(userCollection);
       mockPrisma.userRequest.findMany.mockResolvedValue([]);
       mockPrisma.userCollection.findMany.mockResolvedValue([]);
 
@@ -1004,6 +1010,7 @@ describe('MockServerService', () => {
         },
       };
 
+      mockPrisma.userCollection.findUnique.mockResolvedValue(userCollection);
       mockPrisma.userRequest.findMany.mockResolvedValue([
         multipleExamples,
       ] as any);
@@ -1036,6 +1043,7 @@ describe('MockServerService', () => {
         },
       };
 
+      mockPrisma.userCollection.findUnique.mockResolvedValue(userCollection);
       mockPrisma.userCollection.findMany.mockResolvedValue([]); // No child collections
       mockPrisma.userRequest.findMany.mockResolvedValue([simpleRequest] as any);
 
@@ -1070,6 +1078,7 @@ describe('MockServerService', () => {
         },
       };
 
+      mockPrisma.teamCollection.findUnique.mockResolvedValue(teamCollection);
       mockPrisma.teamCollection.findMany.mockResolvedValue([]); // No child collections
       mockPrisma.teamRequest.findMany.mockResolvedValue([teamRequest] as any);
 

packages/hoppscotch-backend/src/mock-server/mock-server.service.ts

@@ -222,7 +222,7 @@ export class MockServerService {
       const collection = await this.prisma.userCollection.findUnique({
         where: { id: mockServer.collectionID },
       });
-      if (!collection) return E.left(MOCK_SERVER_INVALID_COLLECTION);
+      if (!collection) return E.right(null);
       return E.right({
         id: collection.id,
         title: collection.title,
@@ -231,7 +231,7 @@ export class MockServerService {
       const collection = await this.prisma.teamCollection.findUnique({
         where: { id: mockServer.collectionID },
       });
-      if (!collection) return E.left(MOCK_SERVER_INVALID_COLLECTION);
+      if (!collection) return E.right(null);
       return E.right({
         id: collection.id,
         title: collection.title,
@@ -599,6 +599,12 @@ export class MockServerService {
       // This is used by both custom header lookup and candidate fetching
       const collectionIds = await this.getCollectionIds(mockServer);
 
+      if (collectionIds.length === 0) {
+        return E.left(
+          `The collection associated with this mock has been deleted.`,
+        );
+      }
+
       // OPTIMIZATION: Fetch all requests with examples once (single DB query)
       // This is shared between custom header lookup and candidate matching
       const requests = await this.fetchRequestsWithExamples(
@@ -848,6 +854,13 @@ export class MockServerService {
   private async getAllUserCollectionIds(
     rootCollectionId: string,
   ): Promise<string[]> {
+    // First verify the root collection exists
+    const rootCollection = await this.prisma.userCollection.findUnique({
+      where: { id: rootCollectionId },
+    });
+
+    if (!rootCollection) return []; // Collection doesn't exist
+
     const ids = [rootCollectionId];
     const children = await this.prisma.userCollection.findMany({
       where: { parentID: rootCollectionId },
@@ -868,6 +881,13 @@ export class MockServerService {
   private async getAllTeamCollectionIds(
     rootCollectionId: string,
   ): Promise<string[]> {
+    // First verify the root collection exists
+    const rootCollection = await this.prisma.teamCollection.findUnique({
+      where: { id: rootCollectionId },
+    });
+
+    if (!rootCollection) return []; // Collection doesn't exist
+
     const ids = [rootCollectionId];
     const children = await this.prisma.teamCollection.findMany({
       where: { parentID: rootCollectionId },

packages/hoppscotch-common/locales/en.json

@@ -855,6 +855,7 @@
     "authentication": "Authentication"
   },
   "mock_server": {
+    "confirm_delete_log": "Are you sure you want to delete this log?",
     "create_mock_server": "Configure Mock Server",
     "mock_server_configuration": "Mock Server Configuration",
     "mock_server_name": "Mock Server Name",
@@ -885,6 +886,7 @@
     "private_description": "Only authenticated users can access this mock server",
     "select_collection": "Select a collection",
     "select_collection_error": "Please select a collection",
+    "invalid_collection_error": "Failed to create a mock server for the collection.",
     "url_copied": "URL copied to clipboard",
     "make_public": "Make Public",
     "view_logs": "View logs",
@@ -1079,6 +1081,7 @@
     "ai_request_naming_style_custom": "Custom",
     "ai_request_naming_style_custom_placeholder": "Enter your custom naming style template...",
     "experimental_scripting_sandbox": "Experimental scripting sandbox",
+    "enable_experimental_mock_servers": "Enable Mock Servers",
     "sync": "Synchronise",
     "sync_collections": "Collections",
     "sync_description": "These settings are synced to cloud.",
@@ -1375,6 +1378,7 @@
     "loading": "Loading...",
     "message_received": "Message: {message} arrived on topic: {topic}",
     "mqtt_subscription_failed": "Something went wrong while subscribing to topic: {topic}",
+    "no_content_found": "No content found",
     "none": "None",
     "nothing_found": "Nothing found for",
     "published_error": "Something went wrong while publishing msg: {topic} to topic: {message}",

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

@@ -214,9 +214,11 @@ declare module 'vue' {
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideArrowUpRight: typeof import('~icons/lucide/arrow-up-right')['default']
     IconLucideBrush: typeof import('~icons/lucide/brush')['default']
+    IconLucideCheck: typeof import('~icons/lucide/check')['default']
     IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideCircleCheck: typeof import('~icons/lucide/circle-check')['default']
+    IconLucideCopy: typeof import('~icons/lucide/copy')['default']
     IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
     IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
@@ -260,6 +262,7 @@ declare module 'vue' {
     LensesResponseBodyRenderer: typeof import('./components/lenses/ResponseBodyRenderer.vue')['default']
     MockServerCreateMockServer: typeof import('./components/mockServer/CreateMockServer.vue')['default']
     MockServerEditMockServer: typeof import('./components/mockServer/EditMockServer.vue')['default']
+    MockServerLogSection: typeof import('./components/mockServer/LogSection.vue')['default']
     MockServerMockServerDashboard: typeof import('./components/mockServer/MockServerDashboard.vue')['default']
     MockServerMockServerLogs: typeof import('./components/mockServer/MockServerLogs.vue')['default']
     MonacoScriptEditor: typeof import('./components/MonacoScriptEditor.vue')['default']

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

@@ -135,7 +135,10 @@
                   @keyup.p="propertiesAction?.$el.click()"
                   @keyup.t="runCollectionAction?.$el.click()"
                   @keyup.s="sortAction?.$el.click()"
-                  @keyup.m="mockServerAction?.$el.click()"
+                  @keyup.m="
+                    ENABLE_EXPERIMENTAL_MOCK_SERVERS &&
+                    mockServerAction?.$el.click()
+                  "
                   @keyup.escape="hide()"
                 >
                   <HoppSmartItem
@@ -177,7 +180,11 @@
                     "
                   />
                   <HoppSmartItem
-                    v-if="!hasNoTeamAccess && isRootCollection"
+                    v-if="
+                      !hasNoTeamAccess &&
+                      isRootCollection &&
+                      ENABLE_EXPERIMENTAL_MOCK_SERVERS
+                    "
                     ref="mockServerAction"
                     :icon="IconServer"
                     :label="t('mock_server.create_mock_server')"
@@ -321,6 +328,7 @@ import IconArrowUpDown from "~icons/lucide/arrow-up-down"
 import { CurrentSortValuesService } from "~/services/current-sort.service"
 import { useService } from "dioc/vue"
 import { useMockServerStatus } from "~/composables/mockServer"
+import { useSetting } from "@composables/settings"
 import { platform } from "~/platform"
 import { invokeAction } from "~/helpers/actions"
 
@@ -456,9 +464,16 @@ const isCollectionLoading = computed(() => {
 })
 
 // Mock Server Status
+const ENABLE_EXPERIMENTAL_MOCK_SERVERS = useSetting(
+  "ENABLE_EXPERIMENTAL_MOCK_SERVERS"
+)
 const { getMockServerStatus } = useMockServerStatus()
 
 const mockServerStatus = computed(() => {
+  if (!ENABLE_EXPERIMENTAL_MOCK_SERVERS.value) {
+    return { exists: false, isActive: false }
+  }
+
   const collectionId =
     props.collectionsType === "my-collections"
       ? (props.data as HoppCollection).id