feat: multiple tabs - [INS-4225]

packages/insomnia-inso/tsconfig.json

@@ -21,7 +21,7 @@
     "sourceMap": true,
     /* Runs in the DOM NOTE: this is inconsistent with reality */
     "lib": [
-      "ES2020",
+      "ES2023",
       "DOM",
       "DOM.Iterable"
     ],

packages/insomnia-sdk/tsconfig.json

@@ -20,7 +20,7 @@
     "jsx": "react",
     /* If your code runs in the DOM: */
     "lib": [
-      "es2022",
+      "es2023",
       "dom",
       "dom.iterable"
     ],

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

@@ -37,8 +37,8 @@ describe('onChange()', () => {
       name: 'bar',
     });
     expect(changesSeen).toEqual([
-      [['insert', newDoc, false]],
-      [['update', updatedDoc, false]],
+      [['insert', newDoc, false, []]],
+      [['update', updatedDoc, false, [{ name: 'bar' }]]],
     ]);
     db.offChange(callback);
     await models.request.create(doc);
@@ -71,16 +71,16 @@ describe('bufferChanges()', () => {
     await db.flushChanges();
     expect(changesSeen).toEqual([
       [
-        ['insert', newDoc, false],
-        ['update', updatedDoc, false],
+        ['insert', newDoc, false, []],
+        ['update', updatedDoc, false, [true]],
       ],
     ]);
     // Assert no more changes seen after flush again
     await db.flushChanges();
     expect(changesSeen).toEqual([
       [
-        ['insert', newDoc, false],
-        ['update', updatedDoc, false],
+        ['insert', newDoc, false, []],
+        ['update', updatedDoc, false, [true]],
       ],
     ]);
   });
@@ -106,8 +106,8 @@ describe('bufferChanges()', () => {
     await new Promise(resolve => setTimeout(resolve, 1500));
     expect(changesSeen).toEqual([
       [
-        ['insert', newDoc, false],
-        ['update', updatedDoc, false],
+        ['insert', newDoc, false, []],
+        ['update', updatedDoc, false, [true]],
       ],
     ]);
   });
@@ -132,8 +132,8 @@ describe('bufferChanges()', () => {
     await new Promise(resolve => setTimeout(resolve, 1000));
     expect(changesSeen).toEqual([
       [
-        ['insert', newDoc, false],
-        ['update', updatedDoc, false],
+        ['insert', newDoc, false, []],
+        ['update', updatedDoc, false, [true]],
       ],
     ]);
   });
@@ -166,8 +166,8 @@ describe('bufferChangesIndefinitely()', () => {
     await db.flushChanges();
     expect(changesSeen).toEqual([
       [
-        ['insert', newDoc, false],
-        ['update', updatedDoc, false],
+        ['insert', newDoc, false, []],
+        ['update', updatedDoc, false, [true]],
       ],
     ]);
   });

packages/insomnia/src/common/database.ts

@@ -116,7 +116,7 @@ export const database = {
       },
       ...patches,
     );
-    return database.update<T>(doc);
+    return database.update<T>(doc, false, patches);
   },
 
   /** duplicate doc and its decendents recursively */
@@ -524,7 +524,7 @@ export const database = {
     notifyOfChange('remove', doc, fromSync);
   },
 
-  update: async function<T extends BaseModel>(doc: T, fromSync = false) {
+  update: async function <T extends BaseModel>(doc: T, fromSync = false, patches: Patch<T>[] = []) {
     if (db._empty) {
       return _send<T>('update', ...arguments);
     }
@@ -550,7 +550,7 @@ export const database = {
 
           resolve(docWithDefaults);
           // NOTE: This needs to be after we resolve
-          notifyOfChange('update', docWithDefaults, fromSync);
+          notifyOfChange('update', docWithDefaults, fromSync, patches);
         },
       );
     });
@@ -698,7 +698,8 @@ let bufferChangesId = 1;
 export type ChangeBufferEvent<T extends BaseModel = BaseModel> = [
   event: ChangeType,
   doc: T,
-  fromSync: boolean
+  fromSync: boolean,
+  patches: Patch<T>[],
 ];
 
 let changeBuffer: ChangeBufferEvent[] = [];
@@ -709,10 +710,11 @@ let changeListeners: ChangeListener[] = [];
 
 /** push changes into the buffer, so that changeListeners can get change contents when database.flushChanges is called,
  * this method should be called whenever a document change happens */
-async function notifyOfChange<T extends BaseModel>(event: ChangeType, doc: T, fromSync: boolean) {
+async function notifyOfChange<T extends BaseModel>(event: ChangeType, doc: T, fromSync: boolean, patches: Patch<T>[] = []) {
   const updatedDoc = doc;
 
-  changeBuffer.push([event, updatedDoc, fromSync]);
+  // TODO: Use object is better than array
+  changeBuffer.push([event, updatedDoc, fromSync, patches]);
 
   // Flush right away if we're not buffering
   if (!bufferingChanges) {

packages/insomnia/src/main/ipc/electron.ts

@@ -57,7 +57,8 @@ export type MainOnChannels =
   | 'restart'
   | 'set-hidden-window-busy-status'
   | 'setMenuBarVisibility'
-  | 'show-context-menu'
+  | 'show-nunjucks-context-menu'
+  | 'showContextMenu'
   | 'showItemInFolder'
   | 'showOpenDialog'
   | 'showSaveDialog'
@@ -73,7 +74,8 @@ export type MainOnChannels =
 export type RendererOnChannels =
   'clear-all-models'
   | 'clear-model'
-  | 'context-menu-command'
+  | 'nunjucks-context-menu-command'
+  | 'contextMenuCommand'
   | 'grpc.data'
   | 'grpc.end'
   | 'grpc.error'
@@ -114,10 +116,10 @@ const getTemplateValue = (arg: NunjucksParsedTagArg) => {
   return arg.defaultValue;
 };
 export function registerElectronHandlers() {
-  ipcMainOn('show-context-menu', (event, options: { key: string; nunjucksTag: ReturnType<typeof extractNunjucksTagFromCoords> }) => {
+  ipcMainOn('show-nunjucks-context-menu', (event, options: { key: string; nunjucksTag: ReturnType<typeof extractNunjucksTagFromCoords> }) => {
     const { key, nunjucksTag } = options;
     const sendNunjuckTagContextMsg = (type: NunjucksTagContextMenuAction) => {
-      event.sender.send('context-menu-command', { key, nunjucksTag: { ...nunjucksTag, type } });
+      event.sender.send('nunjucks-context-menu-command', { key, nunjucksTag: { ...nunjucksTag, type } });
     };
     try {
       const baseTemplate: MenuItemConstructorOptions[] = nunjucksTag ?
@@ -170,7 +172,7 @@ export function registerElectronHandlers() {
               {
                 click: () => {
                   const tag = `{% ${l.templateTag.name} ${l.templateTag.args?.map(getTemplateValue).join(', ')} %}`;
-                  event.sender.send('context-menu-command', { key, tag });
+                  event.sender.send('nunjucks-context-menu-command', { key, tag });
                 },
               } :
               {
@@ -179,7 +181,7 @@ export function registerElectronHandlers() {
                   click: () => {
                     const additionalTagFields = additionalArgs.length ? ', ' + additionalArgs.map(getTemplateValue).join(', ') : '';
                     const tag = `{% ${l.templateTag.name} '${action.value}'${additionalTagFields} %}`;
-                    event.sender.send('context-menu-command', { key, tag });
+                    event.sender.send('nunjucks-context-menu-command', { key, tag });
                   },
                 })),
               }),
@@ -236,4 +238,17 @@ export function registerElectronHandlers() {
   ipcMainOn('getAppPath', event => {
     event.returnValue = app.getAppPath();
   });
+
+  ipcMainOn('showContextMenu', (event, options: { key: string; menuItems: MenuItemConstructorOptions[]; extra?: Record<string, any> }) => {
+    const menuItems = options.menuItems.map(item => {
+      return {
+        ...item,
+        click: () => {
+          event.sender.send('contextMenuCommand', { key: options.key, label: item.label, extra: options.extra });
+        },
+      };
+    });
+    const menu = Menu.buildFromTemplate(menuItems);
+    menu.popup();
+  });
 }

packages/insomnia/src/main/ipc/main.ts

@@ -1,6 +1,6 @@
 import * as Sentry from '@sentry/electron/main';
 import type { MarkerRange } from 'codemirror';
-import { app, BrowserWindow, type IpcRendererEvent, shell } from 'electron';
+import { app, BrowserWindow, type IpcRendererEvent, type MenuItemConstructorOptions, shell } from 'electron';
 import fs from 'fs';
 
 import { APP_START_TIME, LandingPage, SentryMetrics } from '../../common/sentry';
@@ -39,7 +39,9 @@ export interface RendererToMainBridgeAPI {
   curl: CurlBridgeAPI;
   trackSegmentEvent: (options: { event: string; properties?: Record<string, unknown> }) => void;
   trackPageView: (options: { name: string }) => void;
-  showContextMenu: (options: { key: string; nunjucksTag?: { template: string; range: MarkerRange } }) => void;
+  showNunjucksContextMenu: (options: { key: string; nunjucksTag?: { template: string; range: MarkerRange } }) => void;
+  showContextMenu: (options: { key: string; menuItems: MenuItemConstructorOptions[]; extra?: Record<string, any> }) => void;
+
   database: {
     caCertificate: {
       create: (options: { parentId: string; path: string }) => Promise<string>;

packages/insomnia/src/preload.ts

@@ -69,7 +69,8 @@ const main: Window['main'] = {
   curl,
   trackSegmentEvent: options => ipcRenderer.send('trackSegmentEvent', options),
   trackPageView: options => ipcRenderer.send('trackPageView', options),
-  showContextMenu: options => ipcRenderer.send('show-context-menu', options),
+  showNunjucksContextMenu: options => ipcRenderer.send('show-nunjucks-context-menu', options),
+  showContextMenu: options => ipcRenderer.send('showContextMenu', options),
   database: {
     caCertificate: {
       create: options => ipcRenderer.invoke('database.caCertificate.create', options),

packages/insomnia/src/ui/components/codemirror/code-editor.tsx

@@ -546,7 +546,7 @@ export const CodeEditor = memo(forwardRef<CodeEditorHandle, CodeEditorProps>(({
     }
   };
   useEffect(() => {
-    const unsubscribe = window.main.on('context-menu-command', (_, { key, tag, nunjucksTag }) => {
+    const unsubscribe = window.main.on('nunjucks-context-menu-command', (_, { key, tag, nunjucksTag }) => {
       if (id === key) {
         if (nunjucksTag) {
           const { type, template, range } = nunjucksTag as nunjucksTagContextMenuOptions;
@@ -657,10 +657,10 @@ export const CodeEditor = memo(forwardRef<CodeEditorHandle, CodeEditorProps>(({
           const nunjucksTag = extractNunjucksTagFromCoords({ left: clientX, top: clientY }, codeMirror);
           if (nunjucksTag) {
             // show context menu for nunjucks tag
-            window.main.showContextMenu({ key: id, nunjucksTag });
+            window.main.showNunjucksContextMenu({ key: id, nunjucksTag });
           }
         } else {
-          window.main.showContextMenu({ key: id });
+          window.main.showNunjucksContextMenu({ key: id });
         }
       }}
     >

packages/insomnia/src/ui/components/codemirror/one-line-editor.tsx

@@ -257,7 +257,7 @@ export const OneLineEditor = forwardRef<OneLineEditorHandle, OneLineEditorProps>
   }, [onChange]);
 
   useEffect(() => {
-    const unsubscribe = window.main.on('context-menu-command', (_, { key, tag, nunjucksTag }) => {
+    const unsubscribe = window.main.on('nunjucks-context-menu-command', (_, { key, tag, nunjucksTag }) => {
       if (id === key) {
         if (nunjucksTag) {
           const { type, template, range } = nunjucksTag as nunjucksTagContextMenuOptions;
@@ -320,10 +320,10 @@ export const OneLineEditor = forwardRef<OneLineEditorHandle, OneLineEditorProps>
           const nunjucksTag = extractNunjucksTagFromCoords({ left: clientX, top: clientY }, codeMirror);
           if (nunjucksTag) {
             // show context menu for nunjucks tag
-            window.main.showContextMenu({ key: id, nunjucksTag });
+            window.main.showNunjucksContextMenu({ key: id, nunjucksTag });
           }
         } else {
-          window.main.showContextMenu({ key: id });
+          window.main.showNunjucksContextMenu({ key: id });
         }
       }}
     >

packages/insomnia/src/ui/components/command-palette.tsx

@@ -36,9 +36,11 @@ export const CommandPalette = memo(function CommandPalette() {
       onOpenChange={setIsOpen}
       isOpen={isOpen}
     >
-      <Button data-testid='quick-search' className="px-4 py-1 h-[30.5px] flex-shrink-0 flex items-center justify-center gap-2 bg-[--hl-xs] aria-pressed:bg-[--hl-sm] data-[pressed]:bg-[--hl-sm] rounded-md text-[--color-font] hover:bg-[--hl-xs] ring-inset ring-transparent ring-1 focus:ring-[--hl-md] transition-all text-sm">
-        <Icon icon="search" />
-        Search..
+      <Button data-testid='quick-search' className="px-4 py-1 h-[30.5px] flex-shrink-0 flex items-center justify-between gap-2 bg-[--hl-xs] aria-pressed:bg-[--hl-sm] data-[pressed]:bg-[--hl-sm] rounded-md text-[--color-font] hover:bg-[--hl-xs] ring-inset ring-transparent ring-1 focus:ring-[--hl-md] transition-all text-sm">
+        <div>
+          <Icon icon="search" className='mr-2' />
+          Search..
+        </div>
         {requestSwitchKeyCombination && <Keyboard className='space-x-0.5 items-center font-sans font-normal text-center text-sm shadow-sm bg-[--hl-xs] text-[--hl] rounded-md py-0.5 px-2 inline-block'>
           {constructKeyCombinationDisplay(requestSwitchKeyCombination, false)}
         </Keyboard>}

packages/insomnia/src/ui/components/document-tab.tsx

@@ -0,0 +1,34 @@
+import classnames from 'classnames';
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+interface Props {
+  organizationId: string;
+  projectId: string;
+  workspaceId: string;
+  className?: string;
+}
+
+export const DocumentTab = ({ organizationId, projectId, workspaceId, className }: Props) => {
+  return (
+    <nav className={`flex w-full h-[40px] items-center ${className} px-1 justify-around`}>
+      {[
+        { id: 'spec', name: 'Spec' },
+        { id: 'debug', name: 'Collection' },
+        { id: 'test', name: 'Tests' },
+      ].map(item => (
+        <NavLink
+          key={item.id}
+          to={`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/${item.id}`}
+          className={({ isActive, isPending }) => classnames('text-center rounded-full px-2', {
+            'text-[--color-font-surprise] bg-[--color-surprise]': isActive,
+            'animate-pulse': isPending,
+          })}
+          data-testid={`workspace-${item.id}`}
+        >
+          {item.name}
+        </NavLink>
+      ))}
+    </nav>
+  );
+};

packages/insomnia/src/ui/components/dropdowns/response-history-dropdown.tsx

@@ -60,7 +60,7 @@ export const ResponseHistoryDropdown = ({
 
   const handleDeleteResponses = useCallback(async () => {
     if (isWebSocketResponse(activeResponse)) {
-      window.main.webSocket.closeAll();
+      window.main.webSocket.close({ requestId });
     }
     fetcher.submit({}, {
       action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}/response/delete-all`,

packages/insomnia/src/ui/components/environment-picker.tsx

@@ -5,6 +5,7 @@ import { useFetcher, useNavigate, useParams, useRouteLoaderData } from 'react-ro
 
 import { fuzzyMatch } from '../../common/misc';
 import { isRemoteProject } from '../../models/project';
+import uiEventBus from '../eventBus';
 import { useOrganizationPermissions } from '../hooks/use-organization-features';
 import type { WorkspaceLoaderData } from '../routes/workspace';
 import { Icon } from './icon';
@@ -239,7 +240,6 @@ export const EnvironmentPicker = ({
                     return;
                   }
                   const [environmentId] = keys.values();
-
                   setActiveEnvironmentFetcher.submit(
                     {
                       environmentId,
@@ -249,6 +249,7 @@ export const EnvironmentPicker = ({
                       action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active`,
                     }
                   );
+                  uiEventBus.emit('CHANGE_ACTIVE_ENV', workspaceId);
                 }}
                 className="p-2 select-none text-sm overflow-y-auto focus:outline-none"
               >