mirror of
https://github.com/enso-org/enso.git
synced 2024-12-30 20:21:35 +03:00
2ec7817068
- Implement https://github.com/enso-org/cloud-v2/issues/924 - Refactor all numbers out to CSS variables - Implement some issues raised in the design meeting - The columns selector now only contains *hidden* columns, rather than all of them. - Unified opacity for active (100%), selectable and hovered (75%), selectable (50%) and disabled (30%) - Easily configurable if we want to change it in the future, so the specific values don't matter too much for now. - Always show asset right panel if it is enabled - display placeholder text if <1 or >1 asset is selected - Hide docs icon that was in the top right assets menubar (next to the gear icon for asset settings) (as backend functionality has yet to be implemented) - Clicking a user in the "Shared with" column now adds them to the search as `owner:<username>` - Add a gap between adjacent rows. This makes each row more visually distinct when many rows are selected - Center the left column (the first column) of the context menu below the mouse, rather than centering the entire context menu. - Fix regressions caused by CSS refactor - Make keyboard selection indicator for asset rows rounded again - Other misc. fixes and improvements - Slightly modified styling of chat reaction bar - Hide the row containing the "New Project" button in the cloud drive, when not in the "Home" drive tab - Animate rotation of column sort arrow when clicking on a column to change the sort order - Consistent duration of arrow rotation animation for folder arrows, column sort arrows, chat thread list arrows - Consistent icon for sort arrow for folders and the chat thread list - Minor adjustment of styles for optional properties in the Data Link input Not included in this PR: - Custom (HTML) scrollbars for consistency across all browsers and all OSes (except perhaps touchscreens) - Potentially time-consuming to look for a library (and not quite trivial to implement ourselves) - Columns sliding left as they expand and right as they collapse - Also non-trivial, especially when taking into account horizontal scrolling. - Fixing styles to closer resemble Figma design - As (kinda) mentioned in the meeting - ideally it should be pixel perfect, *but* value consistency with other spacings, opacities etc. over being 100% pixel-perfect - However, it has *partly* been done - mostly for the home page. It's entirely possible that changes made afterwards broke the spacing again though. # Important Notes None
177 lines
7.6 KiB
TypeScript
177 lines
7.6 KiB
TypeScript
/** @file Test copying, moving, cutting and pasting. */
|
|
import * as test from '@playwright/test'
|
|
|
|
import * as actions from './actions'
|
|
|
|
test.test.beforeEach(actions.mockAllAndLogin)
|
|
|
|
test.test('copy', async ({ page }) => {
|
|
const assetRows = actions.locateAssetRows(page)
|
|
|
|
await actions.locateNewFolderIcon(page).click()
|
|
// Assets: [0: Folder 1]
|
|
await actions.locateNewFolderIcon(page).click()
|
|
// Assets: [0: Folder 2, 1: Folder 1]
|
|
await assetRows.nth(0).click({ button: 'right' })
|
|
await test.expect(actions.locateContextMenus(page)).toBeVisible()
|
|
await actions.locateCopyButton(page).click()
|
|
// Assets: [0: Folder 2 <copied>, 1: Folder 1]
|
|
await test.expect(actions.locateContextMenus(page)).not.toBeVisible()
|
|
await assetRows.nth(1).click({ button: 'right' })
|
|
await test.expect(actions.locateContextMenus(page)).toBeVisible()
|
|
await actions.locatePasteButton(page).click()
|
|
// Assets: [0: Folder 2, 1: Folder 1, 2: Folder 2 (copy) <child { depth=1 }>]
|
|
await test.expect(assetRows).toHaveCount(3)
|
|
await test.expect(assetRows.nth(2)).toBeVisible()
|
|
await test.expect(assetRows.nth(2)).toHaveText(/^New Folder 2 [(]copy[)]/)
|
|
const parentLeft = await actions.getAssetRowLeftPx(assetRows.nth(1))
|
|
const childLeft = await actions.getAssetRowLeftPx(assetRows.nth(2))
|
|
test.expect(childLeft, 'child is indented further than parent').toBeGreaterThan(parentLeft)
|
|
})
|
|
|
|
test.test('copy (keyboard)', async ({ page }) => {
|
|
const assetRows = actions.locateAssetRows(page)
|
|
|
|
await actions.locateNewFolderIcon(page).click()
|
|
// Assets: [0: Folder 1]
|
|
await actions.locateNewFolderIcon(page).click()
|
|
// Assets: [0: Folder 2, 1: Folder 1]
|
|
await actions.clickAssetRow(assetRows.nth(0))
|
|
await actions.press(page, 'Mod+C')
|
|
// Assets: [0: Folder 2 <copied>, 1: Folder 1]
|
|
await actions.clickAssetRow(assetRows.nth(1))
|
|
await actions.press(page, 'Mod+V')
|
|
// Assets: [0: Folder 2, 1: Folder 1, 2: Folder 2 (copy) <child { depth=1 }>]
|
|
await test.expect(assetRows).toHaveCount(3)
|
|
await test.expect(assetRows.nth(2)).toBeVisible()
|
|
await test.expect(assetRows.nth(2)).toHaveText(/^New Folder 2 [(]copy[)]/)
|
|
const parentLeft = await actions.getAssetRowLeftPx(assetRows.nth(1))
|
|
const childLeft = await actions.getAssetRowLeftPx(assetRows.nth(2))
|
|
test.expect(childLeft, 'child is indented further than parent').toBeGreaterThan(parentLeft)
|
|
})
|
|
|
|
test.test('move', async ({ page }) => {
|
|
const assetRows = actions.locateAssetRows(page)
|
|
|
|
await actions.locateNewFolderIcon(page).click()
|
|
// Assets: [0: Folder 1]
|
|
await actions.locateNewFolderIcon(page).click()
|
|
// Assets: [0: Folder 2, 1: Folder 1]
|
|
await assetRows.nth(0).click({ button: 'right' })
|
|
await test.expect(actions.locateContextMenus(page)).toBeVisible()
|
|
await actions.locateCutButton(page).click()
|
|
// Assets: [0: Folder 2 <cut>, 1: Folder 1]
|
|
await test.expect(actions.locateContextMenus(page)).not.toBeVisible()
|
|
await assetRows.nth(1).click({ button: 'right' })
|
|
await test.expect(actions.locateContextMenus(page)).toBeVisible()
|
|
await actions.locatePasteButton(page).click()
|
|
// Assets: [0: Folder 1, 1: Folder 2 <child { depth=1 }>]
|
|
await test.expect(assetRows).toHaveCount(2)
|
|
await test.expect(assetRows.nth(1)).toBeVisible()
|
|
await test.expect(assetRows.nth(1)).toHaveText(/^New Folder 2/)
|
|
const parentLeft = await actions.getAssetRowLeftPx(assetRows.nth(0))
|
|
const childLeft = await actions.getAssetRowLeftPx(assetRows.nth(1))
|
|
test.expect(childLeft, 'child is indented further than parent').toBeGreaterThan(parentLeft)
|
|
})
|
|
|
|
test.test('move (drag)', async ({ page }) => {
|
|
const assetRows = actions.locateAssetRows(page)
|
|
|
|
await actions.locateNewFolderIcon(page).click()
|
|
// Assets: [0: Folder 1]
|
|
await actions.locateNewFolderIcon(page).click()
|
|
// Assets: [0: Folder 2, 1: Folder 1]
|
|
await assetRows.nth(0).dragTo(assetRows.nth(1))
|
|
// Assets: [0: Folder 1, 1: Folder 2 <child { depth=1 }>]
|
|
await test.expect(assetRows).toHaveCount(2)
|
|
await test.expect(assetRows.nth(1)).toBeVisible()
|
|
await test.expect(assetRows.nth(1)).toHaveText(/^New Folder 2/)
|
|
const parentLeft = await actions.getAssetRowLeftPx(assetRows.nth(0))
|
|
const childLeft = await actions.getAssetRowLeftPx(assetRows.nth(1))
|
|
test.expect(childLeft, 'child is indented further than parent').toBeGreaterThan(parentLeft)
|
|
})
|
|
|
|
test.test('move to trash', async ({ page }) => {
|
|
const assetRows = actions.locateAssetRows(page)
|
|
|
|
await actions.locateNewFolderIcon(page).click()
|
|
await actions.locateNewFolderIcon(page).click()
|
|
await page.keyboard.down(await actions.modModifier(page))
|
|
await actions.clickAssetRow(assetRows.nth(0))
|
|
await actions.clickAssetRow(assetRows.nth(1))
|
|
await assetRows.nth(0).dragTo(actions.locateTrashCategory(page))
|
|
await page.keyboard.up(await actions.modModifier(page))
|
|
await actions.expectPlaceholderRow(page)
|
|
await actions.locateTrashCategory(page).click()
|
|
await test.expect(assetRows).toHaveCount(2)
|
|
await test.expect(assetRows.nth(0)).toBeVisible()
|
|
await test.expect(assetRows.nth(0)).toHaveText(/^New Folder 1/)
|
|
await test.expect(assetRows.nth(1)).toBeVisible()
|
|
await test.expect(assetRows.nth(1)).toHaveText(/^New Folder 2/)
|
|
})
|
|
|
|
test.test('move (keyboard)', async ({ page }) => {
|
|
const assetRows = actions.locateAssetRows(page)
|
|
|
|
await actions.locateNewFolderIcon(page).click()
|
|
// Assets: [0: Folder 1]
|
|
await actions.locateNewFolderIcon(page).click()
|
|
// Assets: [0: Folder 2, 1: Folder 1]
|
|
await actions.clickAssetRow(assetRows.nth(0))
|
|
await actions.press(page, 'Mod+X')
|
|
// Assets: [0: Folder 2 <cut>, 1: Folder 1]
|
|
await actions.clickAssetRow(assetRows.nth(1))
|
|
await actions.press(page, 'Mod+V')
|
|
// Assets: [0: Folder 1, 1: Folder 2 <child { depth=1 }>]
|
|
await test.expect(assetRows).toHaveCount(2)
|
|
await test.expect(assetRows.nth(1)).toBeVisible()
|
|
await test.expect(assetRows.nth(1)).toHaveText(/^New Folder 2/)
|
|
const parentLeft = await actions.getAssetRowLeftPx(assetRows.nth(0))
|
|
const childLeft = await actions.getAssetRowLeftPx(assetRows.nth(1))
|
|
test.expect(childLeft, 'child is indented further than parent').toBeGreaterThan(parentLeft)
|
|
})
|
|
|
|
test.test('cut (keyboard)', async ({ page }) => {
|
|
const assetRows = actions.locateAssetRows(page)
|
|
|
|
await actions.locateNewFolderIcon(page).click()
|
|
await actions.clickAssetRow(assetRows.nth(0))
|
|
await actions.press(page, 'Mod+X')
|
|
// This action is not a builtin `expect` action, so it needs to be manually retried.
|
|
await test
|
|
.expect(async () => {
|
|
test
|
|
.expect(await assetRows.nth(0).evaluate(el => Number(getComputedStyle(el).opacity)))
|
|
.toBeLessThan(1)
|
|
})
|
|
.toPass()
|
|
})
|
|
|
|
test.test('duplicate', async ({ page }) => {
|
|
const assetRows = actions.locateAssetRows(page)
|
|
|
|
await actions.locateNewFolderIcon(page).click()
|
|
// Assets: [0: Folder 1]
|
|
await assetRows.nth(0).click({ button: 'right' })
|
|
await test.expect(actions.locateContextMenus(page)).toBeVisible()
|
|
await actions.locateDuplicateButton(page).click()
|
|
// Assets: [0: Folder 1 (copy), 1: Folder 1]
|
|
await test.expect(assetRows).toHaveCount(2)
|
|
await test.expect(actions.locateContextMenus(page)).not.toBeVisible()
|
|
await test.expect(assetRows.nth(0)).toBeVisible()
|
|
await test.expect(assetRows.nth(0)).toHaveText(/^New Folder 1 [(]copy[)]/)
|
|
})
|
|
|
|
test.test('duplicate (keyboard)', async ({ page }) => {
|
|
const assetRows = actions.locateAssetRows(page)
|
|
|
|
await actions.locateNewFolderIcon(page).click()
|
|
// Assets: [0: Folder 1]
|
|
await actions.clickAssetRow(assetRows.nth(0))
|
|
await actions.press(page, 'Mod+D')
|
|
// Assets: [0: Folder 1 (copy), 1: Folder 1]
|
|
await test.expect(assetRows).toHaveCount(2)
|
|
await test.expect(assetRows.nth(0)).toBeVisible()
|
|
await test.expect(assetRows.nth(0)).toHaveText(/^New Folder 1 [(]copy[)]/)
|
|
})
|