provide users a subdomain based mock url

packages/insomnia/src/common/__tests__/constants.test.ts

@@ -7,6 +7,7 @@ import {
  ACTIVITY_UNIT_TEST,
  FLEXIBLE_URL_REGEX,
  getContentTypeName,
+ getMockServiceBinURL,
  isValidActivity,
  isWorkspaceActivity,
 } from '../constants';
@@ -86,3 +87,11 @@ describe('getContentTypeName', () => {
  expect(getContentTypeName('unknown')).toBe('Other');
  });
 });
+
+describe('getMockSeviceBinUrl', () => {
+ it('should add subdomain when using insomnia cloud', () => {
+ expect(getMockServiceBinURL('xyz', '/my-route', undefined)).toBe('https://xyz.mock.insomnia.rest/my-route');
+ expect(getMockServiceBinURL('mock_123', '/my-route', undefined)).toBe('https://mock_123.mock.insomnia.rest/my-route');
+ expect(getMockServiceBinURL('mock_123', '/my-route', 'http://localhost:8080')).toBe('http://localhost:8080/bin/mock_123/my-route');
+ });
+});

packages/insomnia/src/common/constants.ts

@@ -125,6 +125,16 @@ export enum UpdateURL {
 // API
 export const getApiBaseURL = () => env.INSOMNIA_API_URL || 'https://api.insomnia.rest';
 export const getMockServiceURL = () => env.INSOMNIA_MOCK_API_URL || 'https://mock.insomnia.rest';
+
+export const getMockServiceBinURL = (serverId: string, path: string, customUrl?: string) => {
+ if (serverId && !customUrl) {
+ const baseUrl = getMockServiceURL();
+ const url = new URL(baseUrl);
+ url.host = serverId + '.' + url.host;
+ return url.origin + path;
+ }
+ return customUrl + '/bin/' + serverId + path;
+};
 export const getAIServiceURL = () => env.INSOMNIA_AI_URL || 'https://ai.insomnia.rest';
 
 export const getUpdatesBaseURL = () => env.INSOMNIA_UPDATES_URL || 'https://updates.insomnia.rest';
@@ -365,7 +375,20 @@ export function getPreviewModeName(previewMode: PreviewMode, useLong = false) {
  return '';
  }
 }
+export function getMimeTypeFromContentType(contentType: string) {
+ // Check if the Content-Type header is provided
+ if (!contentType) {
+ return null;
+ }
+
+ // Split the Content-Type header to separate MIME type from parameters
+ const [mimePart] = contentType.split(';');
 
+ // Trim any extra spaces
+ const mimeType = mimePart.trim();
+
+ return mimeType;
+}
 export function getContentTypeName(contentType?: string | null, useLong = false) {
  if (typeof contentType !== 'string') {
  return '';

packages/insomnia/src/ui/components/editors/mock-response-extractor.tsx

@@ -7,8 +7,9 @@ import {
  useRouteLoaderData,
 } from 'react-router-dom';
 
+import { getContentTypeName, getMimeTypeFromContentType } from '../../../common/constants';
 import { invariant } from '../../../utils/invariant';
-import { useMockRoutePatcher } from '../../routes/mock-route';
+import { isInMockContentTypeList, useMockRoutePatcher } from '../../routes/mock-route';
 import { RequestLoaderData } from '../../routes/request';
 import { WorkspaceLoaderData } from '../../routes/workspace';
 import { HelpTooltip } from '../help-tooltip';
@@ -31,13 +32,15 @@ export const MockResponseExtractor = () => {
  const fetcher = useFetcher();
  const [selectedMockServer, setSelectedMockServer] = useState('');
  const [selectedMockRoute, setSelectedMockRoute] = useState('');
+ const maybeMimeType = activeResponse && getMimeTypeFromContentType(activeResponse.contentType);
+ const mimeType = maybeMimeType && isInMockContentTypeList(maybeMimeType) ? maybeMimeType : 'text/plain';
  return (
  <div className="px-32 h-full flex flex-col justify-center">
  <div className="flex place-content-center text-9xl pb-2 text-[--hl-md]">
  <Icon icon="cube" />
  </div>
  <div className="flex place-content-center pb-2">
- Copy this response to a new mock route or overwrite an existing one.
+ Transform this {getContentTypeName(activeResponse?.contentType) || ''} response to a new mock route or overwrite an existing one.
  </div>
  <form
  onSubmit={async e => {
@@ -49,7 +52,7 @@ export const MockResponseExtractor = () => {
 
  patchMockRoute(selectedMockRoute, {
  body: body.toString(),
- mimeType: activeResponse.contentType,
+ mimeType,
  statusCode: activeResponse.statusCode,
  headers: activeResponse.headers,
  });
@@ -76,7 +79,7 @@ export const MockResponseExtractor = () => {
  JSON.stringify({
  name: name,
  body: body.toString(),
- mimeType: activeResponse.contentType,
+ mimeType,
  statusCode: activeResponse.statusCode,
  headers: activeResponse.headers,
  mockServerName: activeWorkspace.name,
@@ -113,7 +116,7 @@ export const MockResponseExtractor = () => {
  name: name,
  parentId: selectedMockServer,
  body: body.toString(),
- mimeType: activeResponse.contentType,
+ mimeType,
  statusCode: activeResponse.statusCode,
  headers: activeResponse.headers,
  }),
@@ -141,6 +144,7 @@ export const MockResponseExtractor = () => {
  onChange={event => {
  const selected = event.currentTarget.value;
  setSelectedMockServer(selected);
+ setSelectedMockRoute('');
  }}
  >
  <option value="">-- Create new... --</option>
@@ -184,7 +188,7 @@ export const MockResponseExtractor = () => {
  <div className="flex mt-2">
  <Button
  type="submit"
- className="mr-2 hover:no-underline bg-[--color-surprise] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-surprise] transition-colors rounded-sm"
+ className="mr-2 hover:no-underline bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-surprise] aria-pressed:bg-opacity-80 focus:ring-[--hl-md] transition-colors rounded-sm"
  >
  {selectedMockRoute ? 'Overwrite' : 'Create'}
  </Button>
@@ -194,9 +198,9 @@ export const MockResponseExtractor = () => {
  const mockWorkspaceId = mockServerAndRoutes.find(s => s._id === selectedMockServer)?.parentId;
  navigate(`/organization/${organizationId}/project/${projectId}/workspace/${mockWorkspaceId}/mock-server/mock-route/${selectedMockRoute}`);
  }}
- className="hover:no-underline bg-[--color-surprise] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-surprise] transition-colors rounded-sm"
+ className="flex items-center justify-center py-2 px-3 gap-2 bg-[--hl-xxs] aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
  >
- Go to route
+ Go to mock
  </Button>
  </div>
  </form>

packages/insomnia/src/ui/components/mocks/mock-url-bar.tsx

@@ -4,7 +4,7 @@ import { useRouteLoaderData } from 'react-router-dom';
 import { useInterval } from 'react-use';
 import styled from 'styled-components';
 
-import { getMockServiceURL, HTTP_METHODS } from '../../../common/constants';
+import { getMockServiceBinURL, HTTP_METHODS } from '../../../common/constants';
 import * as models from '../../../models';
 import { useTimeoutWhen } from '../../hooks/useTimeoutWhen';
 import { MockRouteLoaderData, useMockRoutePatcher } from '../../routes/mock-route';
@@ -31,7 +31,6 @@ export const MockUrlBar = ({ onPathUpdate, onSend }: { onPathUpdate: (path: stri
  const { hotKeyRegistry } = settings;
  const patchMockRoute = useMockRoutePatcher();
  const [pathInput, setPathInput] = useState<string>(mockRoute.name);
- const mockbinUrl = mockServer.useInsomniaCloud ? getMockServiceURL() : mockServer.url;
  const methodDropdownRef = useRef<DropdownHandle>(null);
  const dropdownRef = useRef<DropdownHandle>(null);
  const inputRef = useRef<OneLineEditorHandle>(null);
@@ -84,11 +83,10 @@ export const MockUrlBar = ({ onPathUpdate, onSend }: { onPathUpdate: (path: stri
  <Button
  className="bg-[--hl-sm] px-3 rounded-sm"
  onPress={() => {
- const compoundId = mockRoute.parentId + pathInput;
  showModal(AlertModal, {
  title: 'Full URL',
- message: mockbinUrl + '/bin/' + compoundId,
- onConfirm: () => window.clipboard.writeText(mockbinUrl + '/bin/' + compoundId),
+ message: getMockServiceBinURL(mockRoute.parentId, pathInput, mockServer.useInsomniaCloud ? undefined : mockServer.url),
+ onConfirm: () => window.clipboard.writeText(getMockServiceBinURL(mockRoute.parentId, pathInput, mockServer.useInsomniaCloud ? undefined : mockServer.url)),
  addCancel: true,
  okLabel: 'Copy',
  });
@@ -105,8 +103,7 @@ export const MockUrlBar = ({ onPathUpdate, onSend }: { onPathUpdate: (path: stri
  <Button
  className="bg-[--hl-sm] px-3 rounded-sm aria-pressed:bg-[--hl-xs] data-[pressed]:bg-[--hl-xs]"
  onPress={() => {
- const compoundId = mockRoute.parentId + pathInput;
- window.clipboard.writeText(mockbinUrl + '/bin/' + compoundId);
+ window.clipboard.writeText(getMockServiceBinURL(mockRoute.parentId, pathInput, mockServer.useInsomniaCloud ? undefined : mockServer.url));
  }}
  >
  <Icon icon="copy" />

packages/insomnia/src/ui/routes/actions.tsx

@@ -1225,20 +1225,21 @@ export const createMockRouteAction: ActionFunction = async ({ request, params })
  const patch = await request.json();
  invariant(typeof patch.name === 'string', 'Name is required');
  // TODO: remove this hack which enables a mock server to be created alongside a route
+ // TODO: use an alternate method to create new workspace and server together
+ // create a mock server under the workspace with the same name
  if (patch.mockServerName) {
- const activeWorkspace = await models.workspace.getById(workspaceId);
- invariant(activeWorkspace, 'Active workspace not found');
- const workspace = await models.workspace.create({
- name: activeWorkspace.name,
+ const collectionWorkspace = await models.workspace.getById(workspaceId);
+ invariant(collectionWorkspace, 'Collection workspace not found');
+ const mockWorkspace = await models.workspace.create({
+ name: collectionWorkspace.name,
  scope: 'mock-server',
  parentId: projectId,
  });
- invariant(workspace, 'Workspace not found');
- // create a mock server under the workspace with the same name
- const newServer = await models.mockServer.getOrCreateForParentId(workspace._id, { name: activeWorkspace.name });
- // TODO: filterout the mockServerName from the patch, or use an alternate method to create new workspace and server
- const mockRoute = await models.mockRoute.create({ ...patch, parentId: newServer._id });
- return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${newServer.parentId}/mock-server/mock-route/${mockRoute._id}`);
+ invariant(mockWorkspace, 'Workspace not found');
+ const newMockServer = await models.mockServer.getOrCreateForParentId(mockWorkspace._id, { name: collectionWorkspace.name });
+ delete patch.mockServerName;
+ const mockRoute = await models.mockRoute.create({ ...patch, parentId: newMockServer._id });
+ return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${newMockServer.parentId}/mock-server/mock-route/${mockRoute._id}`);
  }
  const mockServer = await models.mockServer.getById(patch.parentId);
  invariant(mockServer, 'Mock server not found');

packages/insomnia/src/ui/routes/mock-route.tsx

@@ -2,7 +2,7 @@ import * as Har from 'har-format';
 import React from 'react';
 import { LoaderFunction, useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 
-import { CONTENT_TYPE_JSON, CONTENT_TYPE_PLAINTEXT, CONTENT_TYPE_XML, CONTENT_TYPE_YAML, contentTypesMap, getMockServiceURL, RESPONSE_CODE_REASONS } from '../../common/constants';
+import { CONTENT_TYPE_JSON, CONTENT_TYPE_OTHER, CONTENT_TYPE_PLAINTEXT, CONTENT_TYPE_XML, CONTENT_TYPE_YAML, contentTypesMap, getMockServiceURL, RESPONSE_CODE_REASONS } from '../../common/constants';
 import { database as db } from '../../common/database';
 import { getResponseCookiesFromHeaders } from '../../common/har';
 import * as models from '../../models';
@@ -58,7 +58,10 @@ const mockContentTypes = [
  CONTENT_TYPE_JSON,
  CONTENT_TYPE_XML,
  CONTENT_TYPE_YAML,
+ CONTENT_TYPE_OTHER,
 ];
+export const isInMockContentTypeList = (contentType: string): boolean => Boolean(contentType && mockContentTypes.includes(contentType));
+
 // mockbin expect a HAR response structure
 export const mockRouteToHar = ({ statusCode, statusText, mimeType, headersArray, body }: { statusCode: number; statusText: string; mimeType: string; headersArray: RequestHeader[]; body: string }): Har.Response => {
  const validHeaders = headersArray.filter(({ name }) => !!name);
@@ -221,7 +224,7 @@ export const MockRouteRoute = () => {
  aria-label='Change Body Type'
  triggerButton={
  <DropdownButton>
- {mockRoute.mimeType ? 'Mock ' + contentTypesMap[mockRoute.mimeType]?.[0] : 'Response Body'}
+ {mockRoute.mimeType ? 'Mock ' + contentTypesMap[mockRoute.mimeType]?.[0] : 'Mock Body'}
  <i className="fa fa-caret-down space-left" />
  </DropdownButton>
  }