fix(ui): correct “modified” indicator state across collection, folder, request, and presets/auth tabs (#3386) (#8027)

* fix: 3296 Folder-level No Auth inheritance is ignored; requests still use Collection Auth

tests/auth/auth-mode/effective-auth-mode.spec.ts

@@ -0,0 +1,113 @@
+import { test, expect } from '../../../playwright';
+import { buildCommonLocators, closeAllCollections, createCollection, createFolder, selectAuthMode } from '../../utils/page';
+import { AUTH_MODE_LABELS } from '../../utils/constants';
+
+test.describe('Effective auth mode resolution', () => {
+  test.afterEach(async ({ page }) => {
+    await closeAllCollections(page);
+  });
+
+  test('Nested folder with Inherit should pick up its immediate parent folder, not a grandparent', async ({ page, createTmpDir }) => {
+    const collectionName = 'effective-auth-mode-collection';
+    const locators = buildCommonLocators(page);
+
+    await test.step('Create a collection', async () => {
+      await createCollection(page, collectionName, await createTmpDir());
+    });
+
+    await test.step('Create folder-1 inside the collection and set auth type for folder-1 as Bearer Token', async () => {
+      await createFolder(page, 'folder-1', collectionName, true);
+      await locators.sidebar.folder('folder-1').dblclick();
+      await locators.paneTabs.folderSettingsTab('auth').click();
+      await selectAuthMode(page, AUTH_MODE_LABELS.BEARER);
+      await page.getByRole('button', { name: 'Save' }).click();
+    });
+
+    await test.step('Create folder-2 inside folder-1 and set auth type for folder-2 as Basic Auth', async () => {
+      await createFolder(page, 'folder-2', 'folder-1', false);
+      await locators.sidebar.folder('folder-2').dblclick();
+      await locators.paneTabs.folderSettingsTab('auth').click();
+      await selectAuthMode(page, AUTH_MODE_LABELS.BASIC);
+      await page.getByRole('button', { name: 'Save' }).click();
+    });
+
+    await test.step('Create folder-3 inside folder-2 and set auth type for folder-3 as Inherit', async () => {
+      await createFolder(page, 'folder-3', 'folder-2', false);
+      await locators.sidebar.folder('folder-3').dblclick();
+      await locators.paneTabs.folderSettingsTab('auth').click();
+      await selectAuthMode(page, AUTH_MODE_LABELS.INHERIT);
+      await page.getByRole('button', { name: 'Save' }).click();
+    });
+
+    await test.step('Verify folder-3 should inherit auth from folder-2', async () => {
+      await expect(page.getByText('Auth inherited from folder-2:')).toBeVisible();
+      await expect(locators.auth.inheritedMode()).toHaveText(AUTH_MODE_LABELS.BASIC);
+    });
+  });
+
+  test('Child folder with Inherit should pick up parent folder set to No Auth (not fall through to collection)', async ({ page, createTmpDir }) => {
+    const collectionName = 'no-auth-inherit-collection';
+    const locators = buildCommonLocators(page);
+
+    await test.step('Create a collection', async () => {
+      await createCollection(page, collectionName, await createTmpDir());
+    });
+
+    await test.step('Set auth type for the collection as Basic Auth', async () => {
+      await locators.paneTabs.collectionSettingsTab('auth').click();
+      await selectAuthMode(page, AUTH_MODE_LABELS.BASIC);
+      await page.getByRole('button', { name: 'Save' }).click();
+    });
+
+    await test.step('Create folder-1 inside the collection and set auth type for folder-1 as No Auth', async () => {
+      await createFolder(page, 'folder-1', collectionName, true);
+      await locators.sidebar.folder('folder-1').dblclick();
+      await locators.paneTabs.folderSettingsTab('auth').click();
+      await selectAuthMode(page, AUTH_MODE_LABELS.NONE);
+      await page.getByRole('button', { name: 'Save' }).click();
+    });
+
+    await test.step('Create folder-2 inside folder-1 and set auth type for folder-2 as Inherit', async () => {
+      await createFolder(page, 'folder-2', 'folder-1', false);
+      await locators.sidebar.folder('folder-2').dblclick();
+      await locators.paneTabs.folderSettingsTab('auth').click();
+      await selectAuthMode(page, AUTH_MODE_LABELS.INHERIT);
+      await page.getByRole('button', { name: 'Save' }).click();
+    });
+
+    await test.step('Verify folder-2 should inherit No Auth from folder-1 (not fall through to the collection)', async () => {
+      await expect(page.getByText('Auth inherited from folder-1:')).toBeVisible();
+      await expect(locators.auth.inheritedMode()).toHaveText(AUTH_MODE_LABELS.NONE);
+    });
+  });
+
+  test('Auth dropdown shows No Auth as the selected option after picking it', async ({ page, createTmpDir }) => {
+    const collectionName = 'no-auth-dropdown-collection';
+    const locators = buildCommonLocators(page);
+
+    await test.step('Create a collection', async () => {
+      await createCollection(page, collectionName, await createTmpDir());
+    });
+
+    await test.step('Create folder-1 inside the collection and set auth type for folder-1 as No Auth', async () => {
+      await createFolder(page, 'folder-1', collectionName, true);
+      await locators.sidebar.folder('folder-1').dblclick();
+      await locators.paneTabs.folderSettingsTab('auth').click();
+      await selectAuthMode(page, AUTH_MODE_LABELS.NONE);
+      await page.getByRole('button', { name: 'Save' }).click();
+    });
+
+    await test.step('Verify the auth mode selector shows No Auth as the current mode', async () => {
+      await expect(locators.auth.modeSelector()).toContainText(AUTH_MODE_LABELS.NONE);
+    });
+
+    await test.step('Reopen the dropdown and verify No Auth is highlighted as the selected option', async () => {
+      await page.locator('.auth-mode-label').first().click();
+      // Bruno marks the selected dropdown item with the `dropdown-item-active` class.
+      const noAuthItem = locators.auth.dropdownItem('none');
+      await expect(noAuthItem).toBeVisible();
+      await expect(noAuthItem).toHaveClass(/dropdown-item-active/);
+      await expect(noAuthItem).toContainText(AUTH_MODE_LABELS.NONE);
+    });
+  });
+});

tests/auth/auth-mode/folder-no-auth-stops-inheritance.spec.ts

@@ -0,0 +1,95 @@
+import { test, expect } from '../../../playwright';
+import {
+  buildCommonLocators,
+  closeAllCollections,
+  createCollection,
+  createFolder,
+  createRequest,
+  openRequest,
+  saveRequest,
+  selectAuthMode,
+  selectRequestPaneTab,
+  selectResponsePaneTab,
+  sendRequest,
+  typeIntoField
+} from '../../utils/page';
+import { AUTH_MODE_LABELS } from '../../utils/constants';
+
+test.afterEach(async ({ page }) => {
+  await closeAllCollections(page);
+});
+
+test('Request inherits No Auth from the folder — collection Bearer Token is overridden', async ({ page, createTmpDir }) => {
+  const collectionName = 'folder-no-auth-inheritance';
+  const locators = buildCommonLocators(page);
+
+  await test.step('Create a collection', async () => {
+    await createCollection(page, collectionName, await createTmpDir());
+  });
+
+  await test.step('Set auth type for the collection as Bearer Token', async () => {
+    await locators.paneTabs.collectionSettingsTab('auth').click();
+    await selectAuthMode(page, AUTH_MODE_LABELS.BEARER);
+    await typeIntoField(page, 'Token', 'your_secret_token');
+    await page.getByRole('button', { name: 'Save' }).click();
+  });
+
+  await test.step('Create folder-1 inside the collection and set auth type for folder-1 as No Auth', async () => {
+    await createFolder(page, 'folder-1', collectionName, true);
+    await locators.sidebar.folder('folder-1').dblclick();
+    await locators.paneTabs.folderSettingsTab('auth').click();
+    await selectAuthMode(page, AUTH_MODE_LABELS.NONE);
+    await page.getByRole('button', { name: 'Save' }).click();
+  });
+
+  await test.step('Create an HTTP request inside folder-1 and set auth type for the request as Inherit', async () => {
+    const requestName = 'http-request-1';
+    await createRequest(page, requestName, 'folder-1', {
+      inFolder: true,
+      requestType: 'http',
+      method: 'GET',
+      url: 'https://testbench-sanity.usebruno.com/api/auth/bearer/protected'
+    });
+    await openRequest(page, collectionName, requestName);
+    await selectRequestPaneTab(page, 'Auth');
+    await selectAuthMode(page, AUTH_MODE_LABELS.INHERIT);
+    await saveRequest(page);
+  });
+
+  await test.step('Send the request and open the Timeline tab', async () => {
+    await sendRequest(page);
+    await selectResponsePaneTab(page, 'Timeline');
+  });
+
+  await test.step('Verify the response status code is 401 Unauthorized', async () => {
+    await expect(locators.response.statusCode()).toContainText('401');
+  });
+
+  await test.step('Open the latest timeline entry and verify no Authorization header was sent', async () => {
+    const timelineItem = locators.timeline.lastItem();
+    await locators.timeline.itemHeader(timelineItem).click();
+    await expect(timelineItem).toContainText('No Headers found');
+    await locators.timeline.clearButton().click();
+  });
+
+  await test.step('Change folder-1 auth type to Bearer Token with the expected token', async () => {
+    await locators.sidebar.folder('folder-1').dblclick();
+    await locators.paneTabs.folderSettingsTab('auth').click();
+    await selectAuthMode(page, AUTH_MODE_LABELS.BEARER);
+    await typeIntoField(page, 'Token', 'your_secret_token');
+    await page.getByRole('button', { name: 'Save' }).click();
+  });
+
+  await test.step('Send the request again and verify the response status code is 200', async () => {
+    await openRequest(page, collectionName, 'http-request-1');
+    await sendRequest(page);
+    await selectResponsePaneTab(page, 'Timeline');
+    await expect(locators.response.statusCode()).toContainText('200');
+  });
+
+  await test.step('Open the latest timeline entry and verify the Bearer token was sent', async () => {
+    const timelineItem = locators.timeline.lastItem();
+    await locators.timeline.itemHeader(timelineItem).click();
+    await expect(timelineItem).toContainText('Bearer your_secret_token');
+  });
+});

tests/auth/auth-mode/modified-indicator-for-auth.spec.ts

@@ -0,0 +1,147 @@
+import { test, expect } from '../../../playwright';
+import {
+  buildCommonLocators,
+  closeAllCollections,
+  createCollection,
+  createFolder,
+  createRequest,
+  openRequest,
+  saveRequest,
+  selectAuthMode,
+  selectRequestPaneTab
+} from '../../utils/page';
+import { AUTH_MODE_LABELS } from '../../utils/constants';
+
+test.describe('Modified indicator for auth tab', () => {
+  test.afterEach(async ({ page }) => {
+    await closeAllCollections(page);
+  });
+
+  test('Folder Auth tab indicator dot reflects effective auth (shows on inherit, hides on No Auth)', async ({ page, createTmpDir }) => {
+    const collectionName = 'modified-indicator-collection';
+    const locators = buildCommonLocators(page);
+
+    await test.step('Create a collection', async () => {
+      await createCollection(page, collectionName, await createTmpDir());
+    });
+
+    await test.step('Set auth type for the collection as Bearer Token', async () => {
+      await locators.paneTabs.collectionSettingsTab('auth').click();
+      await selectAuthMode(page, AUTH_MODE_LABELS.BEARER);
+      await page.getByRole('button', { name: 'Save' }).click();
+    });
+
+    await test.step('Verify the collection auth mode shows Bearer Token', async () => {
+      await expect(locators.auth.modeSelector()).toContainText(AUTH_MODE_LABELS.BEARER);
+    });
+
+    await test.step('Create folder-1 inside the collection and set auth type for folder-1 as Inherit', async () => {
+      await createFolder(page, 'folder-1', collectionName, true);
+      await locators.sidebar.folder('folder-1').dblclick();
+      await locators.paneTabs.folderSettingsTab('auth').click();
+      await selectAuthMode(page, AUTH_MODE_LABELS.INHERIT);
+      await page.getByRole('button', { name: 'Save' }).click();
+    });
+
+    await test.step('Verify folder-1 inherits Bearer Token from the collection', async () => {
+      await expect(page.getByText('Auth inherited from Collection:')).toBeVisible();
+      await expect(locators.auth.inheritedMode()).toHaveText(AUTH_MODE_LABELS.BEARER);
+    });
+
+    await test.step('Verify the Auth tab shows the status dot for folder-1 (inheriting Bearer Token)', async () => {
+      await expect(
+        locators.paneTabs.folderSettingsTab('auth').getByTestId('status-dot-auth')
+      ).toBeVisible();
+    });
+
+    await test.step('Change folder-1 auth type to No Auth', async () => {
+      await selectAuthMode(page, AUTH_MODE_LABELS.NONE);
+      await page.getByRole('button', { name: 'Save' }).click();
+    });
+
+    await test.step('Verify the Auth tab does NOT show the status dot for folder-1 (No Auth)', async () => {
+      await expect(
+        locators.paneTabs.folderSettingsTab('auth').getByTestId('status-dot-auth')
+      ).toBeHidden();
+    });
+  });
+
+  const requestProtocolCases = [
+    { protocol: 'HTTP', requestType: 'http' as const, requestName: 'http-request-1', url: 'https://example.com/api' },
+    { protocol: 'gRPC', requestType: 'grpc' as const, requestName: 'grpc-request-1', url: 'grpc://localhost:50051' },
+    { protocol: 'WebSocket', requestType: 'ws' as const, requestName: 'ws-request-1', url: 'ws://localhost:8080' },
+    { protocol: 'GraphQL', requestType: 'graphql' as const, requestName: 'graphql-request-1', url: 'https://example.com/graphql' }
+  ];
+
+  for (const { protocol, requestType, requestName, url } of requestProtocolCases) {
+    test(`${protocol} request inheriting auth from its folder shows the modified indicator dot`, async ({ page, createTmpDir }) => {
+      const collectionName = `${protocol.toLowerCase()}-inherit-indicator-collection`;
+      const locators = buildCommonLocators(page);
+
+      await test.step('Create a collection', async () => {
+        await createCollection(page, collectionName, await createTmpDir());
+      });
+
+      await test.step('Set auth type for the collection as Bearer Token', async () => {
+        await locators.paneTabs.collectionSettingsTab('auth').click();
+        await selectAuthMode(page, AUTH_MODE_LABELS.BEARER);
+        await page.getByRole('button', { name: 'Save' }).click();
+      });
+
+      await test.step('Create folder-1 inside the collection and set auth type for folder-1 as Basic Auth', async () => {
+        await createFolder(page, 'folder-1', collectionName, true);
+        await locators.sidebar.folder('folder-1').dblclick();
+        await locators.paneTabs.folderSettingsTab('auth').click();
+        await selectAuthMode(page, AUTH_MODE_LABELS.BASIC);
+        await page.getByRole('button', { name: 'Save' }).click();
+      });
+
+      await test.step(`Create a ${protocol} request inside folder-1 and set auth type for the request as Inherit`, async () => {
+        await createRequest(page, requestName, 'folder-1', { inFolder: true, requestType, url });
+        await openRequest(page, collectionName, requestName);
+        await selectRequestPaneTab(page, 'Auth');
+        await selectAuthMode(page, AUTH_MODE_LABELS.INHERIT);
+        await saveRequest(page);
+      });
+
+      await test.step(`Verify the ${protocol} request Auth tab shows the status dot (inheriting Basic Auth from folder-1)`, async () => {
+        await expect(
+          locators.paneTabs.responsiveTab('auth').getByTestId('status-dot-auth')
+        ).toBeVisible();
+      });
+
+      await test.step(`Change the ${protocol} request auth type to No Auth and verify the dot disappears`, async () => {
+        await selectAuthMode(page, AUTH_MODE_LABELS.NONE);
+        await saveRequest(page);
+        await expect(
+          locators.paneTabs.responsiveTab('auth').getByTestId('status-dot-auth')
+        ).toBeHidden();
+      });
+
+      await test.step(`Change the ${protocol} request auth type to Basic Auth and verify the dot appears`, async () => {
+        await selectAuthMode(page, AUTH_MODE_LABELS.BASIC);
+        await saveRequest(page);
+        await expect(
+          locators.paneTabs.responsiveTab('auth').getByTestId('status-dot-auth')
+        ).toBeVisible();
+      });
+
+      await test.step('Change folder-1 auth type to No Auth', async () => {
+        await locators.sidebar.folder('folder-1').dblclick();
+        await locators.paneTabs.folderSettingsTab('auth').click();
+        await selectAuthMode(page, AUTH_MODE_LABELS.NONE);
+        await page.getByRole('button', { name: 'Save' }).click();
+      });
+
+      await test.step(`Set the ${protocol} request auth back to Inherit and verify the dot is hidden (folder is No Auth)`, async () => {
+        await openRequest(page, collectionName, requestName);
+        await selectRequestPaneTab(page, 'Auth');
+        await selectAuthMode(page, AUTH_MODE_LABELS.INHERIT);
+        await saveRequest(page);
+        await expect(
+          locators.paneTabs.responsiveTab('auth').getByTestId('status-dot-auth')
+        ).toBeHidden();
+      });
+    });
+  }
+});

tests/collection/presets-indicator.spec.ts

@@ -0,0 +1,70 @@
+import type { Locator } from '@playwright/test';
+import { test, expect } from '../../playwright';
+import { buildCommonLocators, closeAllCollections, createCollection } from '../utils/page';
+
+test.describe('Presets status dot in collection settings', () => {
+  test.afterEach(async ({ page }) => {
+    await closeAllCollections(page);
+  });
+
+  test('Presets dot is hidden on a fresh collection and stays visible once a preset has been saved (even at defaults)', async ({
+    page,
+    createTmpDir
+  }) => {
+    const collectionName = 'test-presets-indicator';
+    const locators = buildCommonLocators(page);
+    let presetsTab: Locator;
+
+    await test.step('Create a fresh collection (opens collection settings tab)', async () => {
+      await createCollection(page, collectionName, await createTmpDir());
+    });
+
+    await test.step('Open the Presets sub-tab', async () => {
+      presetsTab = locators.paneTabs.collectionSettingsTab('presets');
+      // visibility of the Presets sub-tab implies the collection settings tab is open
+      await expect(presetsTab).toBeVisible();
+      await presetsTab.click();
+    });
+
+    await test.step('Verify default state: HTTP selected and request URL is empty', async () => {
+      await expect(locators.presets.requestType('http')).toBeChecked();
+      await expect(locators.presets.requestType('graphql')).not.toBeChecked();
+      await expect(locators.presets.requestType('grpc')).not.toBeChecked();
+      await expect(locators.presets.requestType('ws')).not.toBeChecked();
+      await expect(locators.presets.requestUrl()).toHaveValue('');
+    });
+
+    await test.step('Verify Presets dot is NOT visible when HTTP is selected and URL is empty', async () => {
+      await expect(presetsTab.getByTestId('status-dot')).toBeHidden();
+    });
+
+    await test.step('Select gRPC request type and save', async () => {
+      await locators.presets.requestType('grpc').check();
+      await locators.presets.save().click();
+    });
+
+    await test.step('Verify Presets dot appears when a non-default request type is selected', async () => {
+      await expect(presetsTab.getByTestId('status-dot')).toBeVisible();
+    });
+
+    await test.step('Switch back to HTTP and set a request URL, then save', async () => {
+      await locators.presets.requestType('http').check();
+      await locators.presets.requestUrl().fill('https://example.com');
+      await locators.presets.save().click();
+    });
+
+    await test.step('Verify Presets dot remains visible when request URL is set', async () => {
+      await expect(presetsTab.getByTestId('status-dot')).toBeVisible();
+    });
+
+    await test.step('Clear the request URL with HTTP selected, then save (returns to default values)', async () => {
+      await locators.presets.requestUrl().fill('');
+      await expect(locators.presets.requestType('http')).toBeChecked();
+      await locators.presets.save().click();
+    });
+
+    await test.step('Verify Presets dot is hidden after returning to defaults', async () => {
+      await expect(presetsTab.getByTestId('status-dot')).not.toBeVisible({ timeout: 5000 });
+    });
+  });
+});

tests/utils/constants/auth.ts

@@ -0,0 +1,13 @@
+export const AUTH_MODE_LABELS = {
+  AWSV4: 'AWS Sig v4',
+  BASIC: 'Basic Auth',
+  BEARER: 'Bearer Token',
+  DIGEST: 'Digest Auth',
+  NTLM: 'NTLM Auth',
+  OAUTH1: 'OAuth 1.0',
+  OAUTH2: 'OAuth 2.0',
+  WSSE: 'WSSE Auth',
+  APIKEY: 'API Key',
+  INHERIT: 'Inherit',
+  NONE: 'No Auth'
+} as const;

tests/utils/constants/index.ts

@@ -0,0 +1 @@
+export * from './auth';

tests/utils/page/locators.ts

@@ -97,7 +97,17 @@ export const buildCommonLocators = (page: Page) => ({
     },
     oauth2: {
       grantTypeDropdown: () => page.getByTestId('grant-type-dropdown')
-    }
+    },
+    modeSelector: () => page.getByTestId('auth-mode-selector'),
+    modeLabel: () => page.getByTestId('auth-mode-label'),
+    inheritedMode: () => page.getByTestId('inherited-auth-mode'),
+    dropdownItem: (id: string) => page.getByTestId(`auth-mode-dropdown-${id}`)
+  },
+  presets: {
+    requestType: (type: 'http' | 'graphql' | 'grpc' | 'ws') =>
+      page.getByTestId(`presets-request-type-${type}`),
+    requestUrl: () => page.getByTestId('presets-request-url'),
+    save: () => page.getByTestId('presets-save-btn')
   },
   tags: {
     input: () => page.getByTestId('tag-input').getByRole('textbox'),
@@ -119,6 +129,12 @@ export const buildCommonLocators = (page: Page) => ({
     codeLine: () => page.locator('.response-pane .editor-container .CodeMirror-line'),
     jsonTreeLine: () => page.locator('.response-pane .object-content')
   },
+  timeline: {
+    items: () => page.locator('.timeline-item'),
+    lastItem: () => page.locator('.timeline-item').last(),
+    itemHeader: (item: Locator) => item.locator('.oauth-request-item-header'),
+    clearButton: () => page.getByRole('button', { name: 'Clear Timeline' })
+  },
   plusMenu: {
     button: () => page.getByTestId('collections-header-add-menu'),
     createCollection: () => page.locator('.tippy-box .dropdown-item').filter({ hasText: 'Create collection' }),