Feat/add import export support for examples (#5936)

* feat: enhance Bru grammar to support response blocks and examples

- Added new grammar rules for response headers, status, and body types (JSON, XML, text).
- Introduced parsing logic for example blocks, allowing multiple examples with various body types.
- Implemented tests for example parsing, including edge cases and complex examples with authentication.
- Created fixture files for simple and complex examples to validate parsing functionality.

feat: extend jsonToBru functionality to support response handling and examples

- Updated jsonToBru to include parsing for response headers, status, and body types (JSON, XML, text).
- Enhanced example handling to support multiple examples with various body types.
- Added comprehensive tests for example parsing, including edge cases and complex scenarios with authentication.
- Created fixture files for testing the new features and validating parsing functionality.

move: files to fixtures folder

refactor: simplify response body handling in Bru grammar and JSON conversion

- Removed specific body type handling (JSON, XML, text) from grammar and semantics.
- Updated response body parsing in jsonToBru to handle a unified response body format.
- Adjusted tests and fixtures to reflect changes in response body structure, ensuring compatibility with the new format.

feat: add response bookmarking functionality to ResponsePane

- Introduced ResponseBookmark component to allow users to save responses as examples.
- Added NameExampleModal for naming saved examples.
- Updated ResponsePane to include the new bookmarking feature.
- Implemented Redux actions to manage response examples in the collections state.
- Enhanced CollectionItem to display saved examples and allow for expansion.

fix: remove unnecessary padding from ExampleItem component

feat: implement delete and rename functionality for examples in ExampleItem component

- Added DeleteExampleModal for confirming deletion of examples.
- Integrated modal for renaming examples with state management.
- Enhanced ExampleItem to handle example deletion and renaming through modals.
- Updated Redux actions to support example updates and deletions in the collections state.

fix: example writing to  disc properly

fix: example parsing errors

fix: request with example parsing error

fix: handle examples in collections and requests

feat: implement response example functionality in the application

- Added ResponseExample component to handle displaying and editing response examples.
- Integrated ResponseExampleRequestPane and ResponseExampleResponsePane for structured request and response handling.
- Enhanced RequestTabPanel and RequestTab components to support response-example tabs.
- Introduced new styled components for better UI/UX in response examples.
- Updated theme files to include styles for response examples.
- Implemented URL bar for editing request URLs in response examples.
- Added functionality for managing headers and parameters in response examples.
- Improved overall structure and organization of response example components.

add styles for example url bar

feat: add Checkbox component and Table-v2 for enhanced UI

- Introduced a new Checkbox component for better user interaction in forms.
- Added Table-v2 component to improve table rendering and resizing functionality.
- Updated existing components to utilize the new Checkbox and Table-v2 for managing headers and parameters in response examples.
- Enhanced styling for better visual consistency across components.
- Updated theme files to include styles for the new components.

feat: implement custom scrollbar styles for response example components

fix: features

add actions , view more

feat: enhance response example functionality

- Added GenerateCodeItem component for generating code snippets from response examples.
- Integrated modal for code generation within ResponseExample component.
- Updated ResponseExampleTopBar to handle example name and description editing.
- Improved state management for response examples, including new actions for updating names and descriptions.
- Enhanced ResponseExampleRequestPane to support editing and saving request details.
- Refactored URL handling in ResponseExampleUrlBar to utilize example-specific data.
- Improved overall user experience with better UI elements and state management.

feat: enhance response example management and UI components

feat: enhance editing capabilities in response example components

feat: update multipart form parameter handling in response examples

feat: refactor response example parameter handling and enhance UI interactions

feat: introduce RadioButton component and update Checkbox usage in response examples

fix: styles

fix radio button styling

fixed radio button styles

feat: add create example from sidebar

feat: enhance ResponseExample components with layout adjustments and new HeightBoundContainer

feat: add Checkbox and RadioButton components with comprehensive tests for rendering, user interactions, and accessibility

feat: playwright test csaes

rm: comments

fix: linting

fix: tests

refactor: update response example tests and enhance functionality

fix: tests

fix: e2e-tests

refactor: implement hasRequestChanges utility for better change detection

rm: console

rm: consoles

fix: lint

fix: tests

fix: response header disabled by default issue

Feat/with bru example parser (#5892)

* fix: response header disabled by default issue

feat: new parsing logic

fix: change test cases to accomodate new brulang

add: path params features

rm:consoles

six: make tab permanent on double click

fix width

feat: add status editing

feat: review fixes

review fixes

fix: review fixes

fix: post review

mv: test files

fix: review

* fix: lint

* fix: review comments

* fix: icons folder strcuture

fix: tests

fix: lint

fix: unit tests

feat: body mode selector

fix: close all collections

rm: example

feat added tests. lang change

feat: add custom status text

fix: status update

feat: add body mode, update tests

add default name prefilled for example

fix: active tab styles, prefilled name, text fixes

fix : pkg lock

fix: review

fix: review comments

fix: hide cursor when readonly

fix: height

fix: null body

fix: response body parsing

fix: test cases

feat: add method support for examples

fix: reponse parsing

fix: update response body type when content type is updated

rm : commented code

feat: update parser logic

fix: organize files

feat: enhance examples handling in collection export and import

feat: postman imports fro examples

feat: enhance OpenAPI import functionality to support examples

feat: support postman export

fix: postman export import

fix: open api tests, remove requestbody related logic

rm: examples

fix:  move common attributes files

ui fixes

fix: clone issue

fix: create example from request menu

review fixes

more review fixes

mv: files, fix mode req error

organize files

fix:tests

fix: save dot issue

fix: bugs

fix: postman export

fix: import path params

* chore:improve modal handling in environment and response example tests

fix: test issues resolved

* chore: update response example tests to use new fixture files and improve cleanup logic

---------

Co-authored-by: Abhishek S Lal <abhishek@usebruno.com>
Co-authored-by: Bijin Bruno <bijin@usebruno.com>

tests/response-examples/create-example.spec.ts

@@ -0,0 +1,118 @@
+import { execSync } from 'child_process';
+import { test, expect } from '../../playwright';
+import path from 'path';
+
+test.describe.serial('Create and Delete Response Examples', () => {
+  test.afterAll(async () => {
+    // Reset the collection request file to the original state
+    execSync(`git checkout -- ${path.join(__dirname, 'fixtures', 'collection', 'create-example.bru')}`);
+  });
+
+  test('should create a response example from response bookmark', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('create-example').click();
+    });
+
+    await test.step('Send request and validate example creation', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      // Wait for 30 seconds for the response bookmark button to be visible, on slower internet connections it may take longer to get the response.
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+
+      await expect(page.getByText('Save Response as Example')).toBeVisible();
+      await expect(page.getByTestId('create-example-name-input')).toBeVisible();
+      await expect(page.getByTestId('create-example-description-input')).toBeVisible();
+
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Test Example from Bookmark');
+      await page.getByTestId('create-example-description-input').fill('This is a test example created from response bookmark');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+      await expect(page.getByText('Test Example from Bookmark')).toBeVisible();
+    });
+  });
+
+  test('Validate name is required to create example', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('create-example').click();
+    });
+
+    await test.step('Validate error when name is empty', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+
+      await expect(page.getByRole('button', { name: 'Create Example' })).toBeEnabled();
+
+      // Clear the pre-filled name to test validation
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByRole('button', { name: 'Create Example' }).click();
+      await expect(page.getByTestId('name-error')).toBeVisible();
+      await expect(page.getByTestId('name-error')).toHaveText('Example name is required');
+    });
+
+    await test.step('Create example with valid name', async () => {
+      await page.getByTestId('create-example-name-input').fill('Required Name');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+
+      // Modal should close and example should be created
+      await expect(page.getByText('Save Response as Example')).not.toBeVisible();
+    });
+  });
+
+  test('should close modal when cancelled', async ({ pageWithUserData: page }) => {
+    await test.step('Test modal cancellation', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+      await page.getByRole('button', { name: 'Cancel' }).click();
+      await expect(page.getByText('Save Response as Example')).not.toBeVisible();
+    });
+  });
+
+  test('should reset form when modal is reopened', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('create-example').click();
+    });
+
+    await test.step('Test form reset', async () => {
+      await page.locator('#send-request').getByRole('img').nth(2).click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+
+      await page.getByTestId('create-example-name-input').fill('Test Name');
+      await page.getByTestId('create-example-description-input').fill('Test Description');
+      await page.getByRole('button', { name: 'Cancel' }).click();
+
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+      // The name field should have the pre-filled default value
+      await expect(page.getByTestId('create-example-name-input')).toHaveValue('example');
+      // Description should still be empty
+      await expect(page.getByTestId('create-example-description-input')).toHaveValue('');
+      await page.getByRole('button', { name: 'Cancel' }).click();
+    });
+  });
+
+  test('should show created example in sidebar after expanding request', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('create-example').click();
+    });
+
+    await test.step('Create example and verify sidebar visibility', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Sidebar Test Example');
+      await page.getByTestId('create-example-description-input').fill('This example should appear in the sidebar');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+      // Wait for modal to close
+      await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
+    });
+
+    await test.step('Verify example appears in sidebar', async () => {
+      await page.locator('.collection-item-name', { hasText: 'create-example' }).getByTestId('request-item-chevron').click();
+      const exampleItem = page.locator('.collection-item-name').getByText('Sidebar Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+    });
+  });
+});

tests/response-examples/edit-example.spec.ts

@@ -0,0 +1,182 @@
+import { test, expect } from '../../playwright';
+import { execSync } from 'child_process';
+import path from 'path';
+
+test.describe.serial('Edit Response Examples', () => {
+  test.afterAll(async () => {
+    // Reset the collection request file to the original state
+    execSync(`git checkout -- ${path.join(__dirname, 'fixtures', 'collection', 'edit-example.bru')}`);
+  });
+
+  test('should enter edit mode and show editable fields when edit button is clicked', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('edit-example').click();
+    });
+
+    await test.step('Make a successful request and create an example', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click();
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Test Example');
+      await page.getByTestId('create-example-description-input').fill('This is a test example');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+      // Wait for modal to close
+      await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
+    });
+
+    await test.step('Open existing example', async () => {
+      await page.locator('.collection-item-name', { hasText: 'edit-example' }).getByTestId('request-item-chevron').click();
+      const exampleItem = page.locator('.collection-item-name').getByText('Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click();
+    });
+
+    await test.step('Verify edit mode functionality', async () => {
+      await expect(page.getByTestId('response-example-title')).toBeVisible();
+      await expect(page.getByTestId('response-example-edit-btn')).toBeVisible();
+      await page.getByTestId('response-example-edit-btn').click();
+      await expect(page.getByTestId('response-example-name-input')).toBeVisible();
+      await expect(page.getByTestId('response-example-description-input')).toBeVisible();
+      await expect(page.getByTestId('response-example-save-btn')).toBeVisible();
+      await expect(page.getByTestId('response-example-cancel-btn')).toBeVisible();
+    });
+  });
+
+  test('should successfully update example name and persist changes', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('edit-example').click();
+    });
+
+    await test.step('Create example to update', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Original Example Name');
+      await page.getByTestId('create-example-description-input').fill('Original description');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+      // Wait for modal to close
+      await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
+      const exampleItem = page.locator('.collection-item-name').getByText('Original Example Name', { exact: true });
+      await expect(exampleItem).toBeVisible();
+    });
+
+    await test.step('Open existing example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Original Example Name', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click();
+    });
+
+    await test.step('Update example name and verify persistence', async () => {
+      await page.getByTestId('response-example-edit-btn').click();
+      await page.getByTestId('response-example-name-input').clear();
+      await page.getByTestId('response-example-name-input').fill('Updated Example Name');
+      await page.getByTestId('response-example-save-btn').click();
+      await expect(page.getByTestId('response-example-title')).toHaveText('edit-example / Updated Example Name');
+    });
+  });
+
+  test('should successfully update example description and persist changes', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('edit-example').click();
+    });
+
+    await test.step('Create example to update description', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Description Test Example');
+      await page.getByTestId('create-example-description-input').fill('Original description');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+      // Wait for modal to close
+      await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
+      const exampleItem = page.locator('.collection-item-name').getByText('Description Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+    });
+
+    await test.step('Open existing example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Description Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click();
+    });
+
+    await test.step('Update example description and verify persistence', async () => {
+      await page.getByTestId('response-example-edit-btn').click();
+      await page.getByTestId('response-example-description-input').clear();
+      await page.getByTestId('response-example-description-input').fill('Updated description for the example');
+      await page.getByTestId('response-example-save-btn').click();
+      await expect(page.getByTestId('response-example-description')).toHaveText('Updated description for the example');
+    });
+  });
+
+  test('should discard changes and revert to original values when cancel is clicked', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('edit-example').click();
+    });
+
+    await test.step('Create example to test cancel functionality', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Cancel Test Example');
+      await page.getByTestId('create-example-description-input').fill('Original description for cancel test');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+      // Wait for modal to close
+      await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
+      const exampleItem = page.locator('.collection-item-name').getByText('Cancel Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+    });
+
+    await test.step('Open existing example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Cancel Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click();
+    });
+
+    await test.step('Test cancel functionality and verify reversion', async () => {
+      const originalName = await page.getByTestId('response-example-title').textContent();
+      await page.getByTestId('response-example-edit-btn').click();
+      await page.getByTestId('response-example-name-input').clear();
+      await page.getByTestId('response-example-name-input').fill('This should not be saved');
+      await page.getByTestId('response-example-cancel-btn').click();
+      await expect(page.getByTestId('response-example-title')).toHaveText(originalName!);
+    });
+  });
+
+  test('should save changes using keyboard shortcut (Cmd+S)', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('edit-example').click();
+    });
+
+    await test.step('Create example to test keyboard shortcut', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Keyboard Shortcut Test Example');
+      await page.getByTestId('create-example-description-input').fill('Original description for keyboard test');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+      // Wait for modal to close
+      await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
+      const exampleItem = page.locator('.collection-item-name').getByText('Keyboard Shortcut Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+    });
+
+    await test.step('Open existing example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Keyboard Shortcut Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click();
+    });
+
+    await test.step('Test keyboard shortcut save functionality', async () => {
+      await page.getByTestId('response-example-edit-btn').click();
+      await page.getByTestId('response-example-name-input').clear();
+      await page.getByTestId('response-example-name-input').fill('Keyboard Shortcut Test');
+      await page.keyboard.press('Meta+s');
+      await expect(page.getByTestId('response-example-title')).toHaveText('edit-example / Keyboard Shortcut Test');
+    });
+  });
+});

tests/response-examples/fixtures/collection/bruno.json

@@ -0,0 +1,5 @@
+{
+  "version": "1",
+  "name": "collection",
+  "type": "collection"
+}

tests/response-examples/fixtures/collection/create-example.bru

@@ -0,0 +1,22 @@
+meta {
+  name: create-example
+  type: http
+  seq: 1
+}
+
+post {
+  url: https://testbench-sanity.usebruno.com/api/echo/json
+  body: json
+  auth: none
+}
+
+headers {
+  Content-Type: application/json
+}
+
+body:json {
+  {
+    "message": "Hello World",
+    "timestamp": "{{$timestamp}}"
+  }
+}

tests/response-examples/fixtures/collection/edit-example.bru

@@ -0,0 +1,22 @@
+meta {
+  name: edit-example
+  type: http
+  seq: 1
+}
+
+post {
+  url: https://testbench-sanity.usebruno.com/api/echo/json
+  body: json
+  auth: none
+}
+
+headers {
+  Content-Type: application/json
+}
+
+body:json {
+  {
+    "message": "Hello World",
+    "timestamp": "{{$timestamp}}"
+  }
+}

tests/response-examples/fixtures/collection/menu-operations.bru

@@ -0,0 +1,22 @@
+meta {
+  name: menu-operations
+  type: http
+  seq: 1
+}
+
+post {
+  url: https://testbench-sanity.usebruno.com/api/echo/json
+  body: json
+  auth: none
+}
+
+headers {
+  Content-Type: application/json
+}
+
+body:json {
+  {
+    "message": "Hello World",
+    "timestamp": "{{$timestamp}}"
+  }
+}

tests/response-examples/init-user-data/collection-security.json

@@ -0,0 +1,10 @@
+{
+  "collections": [
+    {
+      "path": "{{projectRoot}}/tests/response-examples/fixtures/collection",
+      "securityConfig": {
+        "jsSandboxMode": "safe"
+      }
+    }
+  ]
+}

tests/response-examples/init-user-data/preferences.json

@@ -0,0 +1,6 @@
+{
+  "maximized": false,
+  "lastOpenedCollections": [
+    "{{projectRoot}}/tests/response-examples/fixtures/collection"
+  ]
+}

tests/response-examples/menu-operations.spec.ts

@@ -0,0 +1,114 @@
+import { test, expect } from '../../playwright';
+import { execSync } from 'child_process';
+import path from 'path';
+
+test.describe.serial('Response Example Menu Operations', () => {
+  test.afterAll(async () => {
+    // Reset the collection request file to the original state
+    execSync(`git checkout -- ${path.join(__dirname, 'fixtures', 'collection', 'menu-operations.bru')}`);
+  });
+
+  test('should clone a response example via three dots menu', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('menu-operations').click();
+    });
+
+    await test.step('Create example', async () => {
+      await page.locator('#send-request').getByRole('img').nth(2).click();
+      await page.getByTestId('response-bookmark-btn').click();
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Example to Clone');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+      // Wait for modal to close
+      await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
+      await page.locator('.collection-item-name', { hasText: 'menu-operations' }).getByTestId('request-item-chevron').click();
+
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Clone');
+      await expect(exampleItem).toBeVisible();
+    });
+
+    await test.step('Clone example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Clone');
+      await exampleItem.hover();
+      await page.getByTestId('response-example-menu-icon').last().click();
+
+      await page.getByTestId('response-example-clone-option').click();
+      const clonedExampleItem = page.locator('.collection-item-name').getByText('Example to Clone (Copy)');
+      await expect(clonedExampleItem).toBeVisible();
+    });
+  });
+
+  test('should delete a response example via three dots menu', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('menu-operations').click();
+    });
+
+    await test.step('Create example to delete', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Example to Delete');
+      await page.getByTestId('create-example-description-input').fill('This example will be deleted');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+      // Wait for modal to close
+      await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
+
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Delete', { exact: true });
+      await expect(exampleItem).toBeVisible();
+    });
+
+    await test.step('Delete example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Delete', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.hover();
+      await page.getByTestId('response-example-menu-icon').last().click();
+
+      await page.getByTestId('response-example-delete-option').click();
+      await expect(page.getByText('Delete Example')).toBeVisible();
+      await page.getByRole('button', { name: 'Delete' }).click();
+      await expect(exampleItem).not.toBeVisible();
+    });
+  });
+
+  test('should rename a response example via three dots menu', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('menu-operations').click();
+    });
+
+    await test.step('Create example to rename', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Example to Rename');
+      await page.getByTestId('create-example-description-input').fill('This example will be renamed');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+      // Wait for modal to close
+      await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
+
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Rename', { exact: true });
+      await expect(exampleItem).toBeVisible();
+    });
+
+    await test.step('Rename example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Rename', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.hover();
+      await page.getByTestId('response-example-menu-icon').last().click();
+      await page.getByTestId('response-example-rename-option').click();
+      await expect(page.getByText('Rename Example')).toBeVisible();
+      const renameExampleNameInput = page.getByTestId('rename-example-name-input');
+      await renameExampleNameInput.clear();
+      await renameExampleNameInput.fill('Renamed Example');
+      await page.getByRole('button', { name: 'Rename' }).click();
+      // Wait for modal to close
+      await page.waitForSelector('text=Rename Example', { state: 'detached' });
+      const updatedExampleItem = page.locator('.collection-item-name').getByText('Renamed Example', { exact: true });
+      await expect(exampleItem).not.toBeVisible();
+      await expect(updatedExampleItem).toBeVisible();
+      await expect(updatedExampleItem).toHaveText('Renamed Example');
+    });
+  });
+});