feat: add copy paste feature for folder (#6097)

* feat: add copy paste feature for folder

* add: playwright test

* fix

* fix

* add: keyboardFocusBg in light mode

* fix: copy paste in yaml collection

* improvement
This commit is contained in:
Pooja
2025-12-02 15:29:32 +05:30
committed by GitHub
parent bc4062b950
commit 06a024a1d9
12 changed files with 383 additions and 68 deletions

View File

@@ -0,0 +1,92 @@
import { test, expect } from '../../../playwright';
import { closeAllCollections, createCollection } from '../../utils/page';
test.describe('Copy and Paste Folders', () => {
test.afterAll(async ({ page }) => {
await closeAllCollections(page);
});
test('should copy and paste a folder within the same collection', async ({ page, createTmpDir }) => {
await createCollection(page, 'test-collection', await createTmpDir('test-collection'), { openWithSandboxMode: 'safe' });
const collection = page.locator('.collection-name').filter({ hasText: 'test-collection' });
// Create a new folder with a request inside
await collection.locator('.collection-actions').hover();
await collection.locator('.collection-actions .icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'New Folder' }).click();
await page.locator('#folder-name').fill('folder-to-copy');
await page.getByRole('button', { name: 'Create' }).click();
const folder = page.locator('.collection-item-name').filter({ hasText: 'folder-to-copy' });
await expect(folder).toBeVisible();
// Add a request to the folder
await folder.hover();
await folder.locator('.menu-icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'New Request' }).click();
await page.getByPlaceholder('Request Name').fill('request-in-folder');
await page.locator('#new-request-url .CodeMirror').click();
await page.locator('textarea').fill('https://echo.usebruno.com/test');
await page.getByRole('button', { name: 'Create' }).click();
await folder.click();
await expect(page.locator('.collection-item-name').filter({ hasText: 'request-in-folder' })).toBeVisible();
// Copy the folder
await folder.hover();
await folder.locator('.menu-icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'Copy' }).click();
// Paste into the collection root
await collection.hover();
await collection.locator('.collection-actions .icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'Paste' }).click();
// Verify the pasted folder appears
await expect(page.locator('.collection-item-name').filter({ hasText: 'folder-to-copy' })).toHaveCount(2);
});
test('should copy and paste a folder into a different collection', async ({ page, createTmpDir }) => {
// Create second collection
await createCollection(page, 'test-collection-2', await createTmpDir('test-collection-2'), { openWithSandboxMode: 'safe' });
const collection2 = page.locator('.collection-name').filter({ hasText: 'test-collection-2' });
// Paste the folder from clipboard into the new collection
await collection2.hover();
await collection2.locator('.collection-actions .icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'Paste' }).click();
// Verify the pasted folder appears in the new collection
await expect(page.locator('.collection-item-name').filter({ hasText: 'folder-to-copy' })).toHaveCount(3);
});
test('should paste folder into another folder', async ({ page }) => {
const collection = page.locator('.collection-name').filter({ hasText: 'test-collection-2' });
const folderToCopy = page.locator('.collection-item-name').filter({ hasText: 'folder-to-copy' }).first();
// Create a target folder
await collection.locator('.collection-actions').hover();
await collection.locator('.collection-actions .icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'New Folder' }).click();
await page.locator('#folder-name').fill('target-folder');
await page.getByRole('button', { name: 'Create' }).click();
const targetFolder = page.locator('.collection-item-name').filter({ hasText: 'target-folder' });
await expect(targetFolder).toBeVisible();
await targetFolder.click();
// Copy folder-to-copy
await folderToCopy.hover();
await folderToCopy.locator('.menu-icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'Copy' }).click();
await folderToCopy.click();
// Paste into target folder
await targetFolder.hover();
await targetFolder.locator('.menu-icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'Paste' }).click();
// Verify folder was pasted inside target folder
await expect(page.locator('.collection-item-name').filter({ hasText: 'folder-to-copy' })).toHaveCount(4);
});
});

View File

@@ -50,7 +50,6 @@ test.describe('Copy and Paste Requests', () => {
await folder.locator('.menu-icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'Paste' }).click();
await page.waitForTimeout(2000);
await expect(page.locator('.collection-item-name').filter({ hasText: 'original-request' })).toHaveCount(3);
});

View File

@@ -0,0 +1,93 @@
import { test, expect } from '../../../playwright';
import { closeAllCollections, createCollection } from '../../utils/page';
test.describe('Copy and Paste with Keyboard Shortcuts', () => {
test.afterAll(async ({ page }) => {
await closeAllCollections(page);
});
test('should copy and paste request using keyboard shortcuts', async ({ page, createTmpDir }) => {
await createCollection(page, 'keyboard-test', await createTmpDir('keyboard-test'), { openWithSandboxMode: 'safe' });
const collection = page.locator('.collection-name').filter({ hasText: 'keyboard-test' });
// Create a request
await collection.locator('.collection-actions').hover();
await collection.locator('.collection-actions .icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'New Request' }).click();
await page.getByPlaceholder('Request Name').fill('test-request');
await page.locator('#new-request-url .CodeMirror').click();
await page.locator('textarea').fill('https://echo.usebruno.com');
await page.getByRole('button', { name: 'Create' }).click();
const requestItem = page.locator('.collection-item-name').filter({ hasText: 'test-request' });
await expect(requestItem).toBeVisible();
// Focus the request item
await requestItem.click();
await requestItem.focus();
// Wait for keyboard focus indicator
await expect(requestItem).toHaveClass(/item-keyboard-focused/);
// Use Cmd+C on Mac, Ctrl+C on Windows/Linux
const modifier = process.platform === 'darwin' ? 'Meta' : 'Control';
await page.keyboard.press(`${modifier}+KeyC`);
// Verify copy success (toast message)
await expect(page.getByText(/copied to clipboard/i).first()).toBeVisible();
// Focus the collection to paste
await collection.click();
await collection.focus();
// Use Cmd+V on Mac, Ctrl+V on Windows/Linux
await page.keyboard.press(`${modifier}+KeyV`);
// Verify paste success
await expect(page.getByText(/pasted successfully/i).first()).toBeVisible();
// Verify the pasted request appears
await expect(page.locator('.collection-item-name').filter({ hasText: 'test-request' })).toHaveCount(2);
});
test('should copy and paste folder using keyboard shortcuts', async ({ page }) => {
const collection = page.locator('.collection-name').filter({ hasText: 'keyboard-test' });
// Create a folder
await collection.locator('.collection-actions').hover();
await collection.locator('.collection-actions .icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'New Folder' }).click();
await page.locator('#folder-name').fill('test-folder');
await page.getByRole('button', { name: 'Create' }).click();
const folder = page.locator('.collection-item-name').filter({ hasText: 'test-folder' });
await expect(folder).toBeVisible();
// Focus the folder
await folder.click();
await folder.focus();
// Wait for keyboard focus indicator
await expect(folder).toHaveClass(/item-keyboard-focused/);
// Use keyboard shortcut to copy
const modifier = process.platform === 'darwin' ? 'Meta' : 'Control';
await page.keyboard.press(`${modifier}+KeyC`);
// Verify copy success
await expect(page.getByText(/copied to clipboard/i).first()).toBeVisible();
// Focus the collection to paste
await collection.click();
await collection.focus();
// Use keyboard shortcut to paste
await page.keyboard.press(`${modifier}+KeyV`);
// Verify paste success
await expect(page.getByText(/pasted successfully/i).first()).toBeVisible();
// Verify the pasted folder appears
await expect(page.locator('.collection-item-name').filter({ hasText: 'test-folder' })).toHaveCount(2);
});
});