Spike: remove part of multiple abstraction-[INS-4911]

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-smoke-test/tests/smoke/dashboard-interactions.test.ts

@@ -99,22 +99,22 @@ test.describe('Dashboard', async () => {
       await page.getByTestId('project').click();
 
       // Rename document
-      await page.getByLabel('my-spec.yaml').getByRole('button').click();
+      await page.getByLabel('Files').getByLabel('my-spec.yaml').getByRole('button').click();
       await page.getByRole('menuitem', { name: 'Rename' }).click();
       await page.locator('text=Rename DocumentName Rename >> input[type="text"]').fill('test123');
       await page.click('#root button:has-text("Rename")');
       await expect(page.locator('.app')).toContainText('test123');
 
       // Duplicate document
-      await page.getByLabel('test123').getByRole('button').click();
+      await page.getByLabel('Files').getByLabel('test123').getByRole('button').click();
       await page.getByRole('menuitem', { name: 'Duplicate' }).click();
       await page.locator('input[name="name"]').fill('test123-duplicate');
       await page.click('[role="dialog"] button:has-text("Duplicate")');
 
       await page.getByTestId('project').click();
 
       // Delete document
-      await page.getByLabel('test123-duplicate').getByRole('button').click();
+      await page.getByLabel('Files').getByLabel('test123-duplicate').getByRole('button').click();
       await page.getByRole('menuitem', { name: 'Delete' }).click();
       await page.getByRole('button', { name: 'Delete' }).click();
       // @TODO: Re-enable - Requires mocking VCS operations
@@ -141,15 +141,15 @@ test.describe('Dashboard', async () => {
       await expect(page.locator('.app')).toContainText('test123');
 
       // Duplicate collection
-      await page.getByLabel('test123').getByRole('button').click();
+      await page.getByLabel('Files').getByLabel('test123').getByRole('button').click();
       await page.getByRole('menuitem', { name: 'Duplicate' }).click();
       await page.locator('input[name="name"]').fill('test123-duplicate');
       await page.click('[role="dialog"] button:has-text("Duplicate")');
 
       await page.getByTestId('project').click();
 
       // Delete collection
-      await page.getByLabel('test123-duplicate').getByRole('button').click();
+      await page.getByLabel('Files').getByLabel('test123-duplicate').getByRole('button').click();
       await page.getByRole('menuitem', { name: 'Delete' }).click();
       await page.getByRole('button', { name: 'Delete' }).click();
       // @TODO: Re-enable - Requires mocking VCS operations

packages/insomnia-smoke-test/tests/smoke/design-document-naming.test.ts

@@ -6,7 +6,7 @@ test.describe('design document operations', async () => {
         await page.getByPlaceholder('my-spec.yaml').fill('jurassic park');
         await page.getByPlaceholder('my-spec.yaml').press('Enter');
         await page.getByTestId('project').click();
-        await page.getByLabel('jurassic park').click();
+        await page.getByLabel('Files').getByLabel('jurassic park').click();
     });
 
     test('can delete a test suite with confirmation modal', async ({ page }) => {

packages/insomnia-smoke-test/tests/smoke/insomnia-tab.test.ts

@@ -0,0 +1,88 @@
+import { expect } from '@playwright/test';
+
+import { test } from '../../playwright/test';
+
+const DEFAULT_REQUEST_NAME = 'New Request';
+
+test.describe('multiple-tab feature test', () => {
+  test.slow(process.platform === 'darwin' || process.platform === 'win32', 'Slow app start on these platforms');
+
+  test.beforeEach(async ({ page }) => {
+    await page.getByLabel('Create in project').click();
+    await page.getByLabel('Request collection', { exact: true }).click();
+    await page.getByRole('button', { name: 'Create', exact: true }).click();
+  });
+
+  test('add tab & close tab', async ({ page }) => {
+    await page.getByLabel('Create in collection').click();
+    await page.getByLabel('HTTP Request').click();
+    const tab = await page.getByLabel('Insomnia Tabs').getByLabel(`tab-${DEFAULT_REQUEST_NAME}`, { exact: true });
+    expect(tab).toBeVisible();
+    expect(await tab.getAttribute('data-selected')).toBe('true');
+    await tab.getByRole('button').click();
+    await expect(tab).toBeHidden();
+  });
+
+  test('active tab sync with the sidebar active request', async ({ page }) => {
+    await page.getByLabel('Create in collection').click();
+    await page.getByLabel('HTTP Request').click();
+    await page.getByTestId('New Request').dblclick();
+    await page.getByRole('textbox', { name: 'GET New Request' }).fill('New Request A');
+    await page.getByLabel('Create in collection').click();
+    await page.getByLabel('HTTP Request').click();
+    await page.getByTestId('New Request').dblclick();
+    await page.getByRole('textbox', { name: 'GET New Request' }).fill('New Request B');
+    await page.getByTestId('New Request A').click();
+    await page.waitForTimeout(1000);
+    const tabA = await page.getByLabel('Insomnia Tabs').getByLabel('tab-New Request A', { exact: true });
+    expect(await tabA.getAttribute('data-selected')).toBe('true');
+    await page.getByTestId('New Request B').click();
+    await page.waitForTimeout(1000);
+    const tabB = await page.getByLabel('Insomnia Tabs').getByLabel('tab-New Request B', { exact: true });
+    expect(await tabB.getAttribute('data-selected')).toBe('true');
+  });
+
+  test('close tab after delete a request', async ({ page }) => {
+    await page.getByLabel('Create in collection').click();
+    await page.getByLabel('HTTP Request').click();
+    const tab = await page.getByLabel('Insomnia Tabs').getByLabel(`tab-${DEFAULT_REQUEST_NAME}`, { exact: true });
+    expect(tab).toBeVisible();
+    await page.getByTestId('Dropdown-New-Request').click();
+    await page.getByLabel('Delete').click();
+    await page.getByRole('button', { name: 'Delete', exact: true }).click();
+    await expect(tab).toBeHidden();
+  });
+
+  test('change icon after change request method', async ({ page }) => {
+    await page.getByLabel('Create in collection').click();
+    await page.getByLabel('HTTP Request').click();
+    await page.waitForTimeout(1000);
+    expect(await page.getByLabel('Insomnia Tabs').getByLabel('Tab Tag').innerText()).toEqual('GET');
+    await page.getByLabel('Request Method').click();
+    await page.getByRole('button', { name: 'POST' }).click();
+    await page.waitForTimeout(1000);
+    expect(await page.getByLabel('Insomnia Tabs').getByLabel('Tab Tag').innerText()).toEqual('POST');
+  });
+
+  test('click + button to add a new request', async ({ page }) => {
+    await page.getByLabel('Tab Plus').click();
+    await page.getByRole('menuitem', { name: 'add request to current' }).click();
+    await page.getByTestId(DEFAULT_REQUEST_NAME).click();
+    await page.getByTestId(DEFAULT_REQUEST_NAME).dblclick();
+    await page.getByRole('textbox', { name: 'GET New Request' }).fill('New Request A');
+    await page.getByTestId('project').click();
+    await page.getByLabel('Create in project').click();
+    await page.getByLabel('Request collection', { exact: true }).click();
+    await page.getByPlaceholder('My Collection').fill('Test add tab collection');
+    await page.getByRole('button', { name: 'Create', exact: true }).click();
+    await page.waitForTimeout(1000);
+    await page.getByLabel('Tab Plus').click();
+    await page.getByRole('menuitem', { name: 'add request to other' }).click();
+    await page.getByLabel('Select Workspace').selectOption({ label: 'My Collection' });
+    await page.getByRole('dialog').getByRole('button', { name: 'Add' }).click();
+    await page.waitForTimeout(1000);
+    expect(await page.getByTestId('workspace-context-dropdown').innerText()).toEqual('My Collection');
+    await page.getByTestId(DEFAULT_REQUEST_NAME).click();
+  });
+
+});

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 });
         }
       }}
     >