Toolbar rewrite: (mostly) fixed content, separate config, rich tooltips, and roadmapped tools (#3119)

* Basic implementation of rich tooltips

* Break out config to its own file, add a bunch of items

* Better lower right control tooltip sizing

* Add a bunch of sketch tools to the config

* Fix hotkey collisions and UX polish

* Get tests working again

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Re-run CI

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* We updated how the sidebar buttons' test IDs are generated, fix it post-merge

* fmt

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Re-run CI

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Re-run CI

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Re-run CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Frank Noirot
2024-07-24 23:33:31 -04:00
committed by GitHub
parent ea0a3ac3ba
commit c38e52fbb7
33 changed files with 1480 additions and 679 deletions

View File

@ -175,7 +175,7 @@ async function doBasicSketch(page: Page, openPanes: string[]) {
}
// deselect line tool
await page.getByRole('button', { name: 'Line' }).click()
await page.getByRole('button', { name: 'Line', exact: true }).click()
await page.waitForTimeout(500)
const line1 = await u.getSegmentBodyCoords(`[data-overlay-index="${0}"]`, 0)
@ -203,7 +203,7 @@ async function doBasicSketch(page: Page, openPanes: string[]) {
await expect(page.locator('.cm-cursor')).toHaveCount(2)
}
await page.getByRole('button', { name: 'Constraints' }).click()
await page.getByRole('button', { name: 'Length: open menu' }).click()
await page.getByRole('button', { name: 'Equal Length' }).click()
// Open the code pane.
@ -452,7 +452,7 @@ test.describe('Testing Camera Movement', () => {
// await expect(u.codeLocator).toHaveText(code)
// click the line button
await page.getByRole('button', { name: 'Line' }).click()
await page.getByRole('button', { name: 'Line', exact: true }).click()
const hoverOverNothing = async () => {
// await u.canvasLocator.hover({position: {x: 700, y: 325}})
@ -1462,7 +1462,9 @@ test.describe('Can create sketches on all planes and their back sides', () => {
await page.mouse.click(clickCoords.x, clickCoords.y)
await page.waitForTimeout(300) // wait for animation
await expect(page.getByRole('button', { name: 'Line' })).toBeVisible()
await expect(
page.getByRole('button', { name: 'Line', exact: true })
).toBeVisible()
// draw a line
const startXPx = 600
@ -1472,7 +1474,7 @@ test.describe('Can create sketches on all planes and their back sides', () => {
await expect(page.locator('.cm-content')).toHaveText(code)
await page.getByRole('button', { name: 'Line' }).click()
await page.getByRole('button', { name: 'Line', exact: true }).click()
await u.openAndClearDebugPanel()
await page.getByRole('button', { name: 'Exit Sketch' }).click()
await u.expectCmdLog('[data-message-type="execution-done"]')
@ -1551,7 +1553,9 @@ test.describe('Copilot ghost text', () => {
await expect(page.locator('.cm-ghostText')).not.toBeVisible()
})
test('copilot disabled in sketch mode no select plane', async ({ page }) => {
test.skip('copilot disabled in sketch mode no select plane', async ({
page,
}) => {
const u = await getUtils(page)
// const PUR = 400 / 37.5 //pixeltoUnitRatio
await page.setViewportSize({ width: 1200, height: 500 })
@ -2098,7 +2102,7 @@ test.describe('Testing settings', () => {
.hover()
await page
.getByRole('button', {
name: 'Roll back theme ; Has tooltip: Roll back to match default',
name: 'Roll back theme',
})
.click()
await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
@ -2150,7 +2154,7 @@ test.describe('Testing settings', () => {
.hover()
await page
.getByRole('button', {
name: 'Roll back theme ; Has tooltip: Roll back to match default',
name: 'Roll back theme',
})
.click()
await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
@ -2564,7 +2568,7 @@ test.describe('Testing selections', () => {
|> line([-${commonPoints.num2}, 0], %)`)
// deselect line tool
await page.getByRole('button', { name: 'Line' }).click()
await page.getByRole('button', { name: 'Line', exact: true }).click()
await u.closeDebugPanel()
const selectionSequence = async () => {
@ -2589,8 +2593,10 @@ test.describe('Testing selections', () => {
// click a segment hold shift and click an axis, see that a relevant constraint is enabled
await topHorzSegmentClick()
await page.keyboard.down('Shift')
const constrainButton = page.getByRole('button', { name: 'Constraints' })
const absYButton = page.getByRole('button', { name: 'ABS Y' })
const constrainButton = page.getByRole('button', {
name: 'Length: open menu',
})
const absYButton = page.getByRole('button', { name: 'Absolute Y' })
await constrainButton.click()
await expect(absYButton).toBeDisabled()
await page.waitForTimeout(100)
@ -3414,21 +3420,6 @@ const extrude001 = extrude(50, sketch001)
await expect(
page.getByRole('button', { name: 'Edit Sketch' })
).not.toBeVisible()
// selecting an editable sketch but clicking "start sketch" should start a new sketch and not edit the existing one
await page.getByText(selectionsSnippets.extrudeAndEditAllowed).click()
await page.getByRole('button', { name: 'Start Sketch' }).click()
await page.waitForTimeout(200)
await page.getByTestId('KCL Code').click()
await page.waitForTimeout(200)
await page.mouse.click(734, 134)
await page.waitForTimeout(100)
await page.getByTestId('KCL Code').click()
// expect main content to contain `sketch005` i.e. started a new sketch
await page.waitForTimeout(300)
await expect(page.locator('.cm-content')).toHaveText(
/sketch001 = startSketchOn\('XZ'\)/
)
})
test('Deselecting line tool should mean nothing happens on click', async ({
@ -3465,7 +3456,7 @@ const extrude001 = extrude(50, sketch001)
let previousCodeContent = await page.locator('.cm-content').innerText()
// deselect the line tool by clicking it
await page.getByRole('button', { name: 'Line' }).click()
await page.getByRole('button', { name: 'Line', exact: true }).click()
await page.mouse.click(700, 200)
await page.waitForTimeout(100)
@ -3478,7 +3469,7 @@ const extrude001 = extrude(50, sketch001)
await expect(page.locator('.cm-content')).toHaveText(previousCodeContent)
// select line tool again
await page.getByRole('button', { name: 'Line' }).click()
await page.getByRole('button', { name: 'Line', exact: true }).click()
await u.closeDebugPanel()
@ -3811,13 +3802,24 @@ const extrude001 = extrude(distance001, sketch001)`.replace(
const sketchButton = page.getByRole('button', { name: 'Start Sketch' })
const cmdBarButton = page.getByRole('button', { name: 'Commands' })
const rectangleToolCommand = page.getByRole('option', {
name: 'Rectangle',
name: 'rectangle',
})
const rectangleToolButton = page.getByRole('button', {
name: 'Corner rectangle',
exact: true,
})
const lineToolCommand = page.getByRole('option', {
name: 'Line',
})
const lineToolButton = page.getByRole('button', {
name: 'Line',
exact: true,
})
const rectangleToolButton = page.getByRole('button', { name: 'Rectangle' })
const lineToolCommand = page.getByRole('option', { name: 'Line' })
const lineToolButton = page.getByRole('button', { name: 'Line' })
const arcToolCommand = page.getByRole('option', { name: 'Tangential Arc' })
const arcToolButton = page.getByRole('button', { name: 'Tangential Arc' })
const arcToolButton = page.getByRole('button', {
name: 'Tangential Arc',
exact: true,
})
// Start a sketch
await sketchButton.click()
@ -3864,7 +3866,7 @@ test.describe('Regression tests', () => {
await u.waitForAuthSkipAppStart()
// expand variables section
const variablesTabButton = page.getByTestId('Variables')
const variablesTabButton = page.getByTestId('variables-pane-button')
await variablesTabButton.click()
// can find sketch001 in the variables summary (pretty-json-container, makes sure we're not looking in the code editor)
@ -3889,7 +3891,7 @@ test.describe('Regression tests', () => {
await u.waitForAuthSkipAppStart()
const variablesTabButton = page.getByTestId('Variables')
const variablesTabButton = page.getByTestId('variables-pane-button')
await variablesTabButton.click()
// expect to see "myVar:5"
await expect(
@ -4150,7 +4152,7 @@ test.describe('Sketch tests', () => {
await u.expectCmdLog('[data-message-type="execution-done"]', 10_000)
await page.waitForTimeout(100)
await page.getByRole('button', { name: 'Line' }).click()
await page.getByRole('button', { name: 'Line', exact: true }).click()
await page.waitForTimeout(100)
await page.mouse.click(700, 200)
@ -4177,9 +4179,7 @@ test.describe('Sketch tests', () => {
page.getByRole('button', { name: 'Exit Sketch' })
).toBeVisible()
await expect(
page.getByText('click plane or face to sketch on')
).toBeVisible()
await expect(page.getByText('select a plane or face')).toBeVisible()
await page.keyboard.press('Escape')
await expect(
@ -4730,7 +4730,7 @@ test.describe('Sketch tests', () => {
await expect(page.locator('.cm-content')).toHaveText(code)
// Assert the tool was unequipped
await expect(
page.getByRole('button', { name: 'Line' })
page.getByRole('button', { name: 'Line', exact: true })
).not.toHaveAttribute('aria-pressed', 'true')
// exit sketch
@ -4892,8 +4892,7 @@ test.describe('Testing constraints', () => {
await page.mouse.click(834, 244)
await page.keyboard.up('Shift')
await page.getByRole('button', { name: 'Constraints', exact: true }).click()
await page.getByRole('button', { name: 'length', exact: true }).click()
await page.getByRole('button', { name: 'Length', exact: true }).click()
await page.getByText('Add constraining value').click()
await expect(page.locator('.cm-content')).toHaveText(
@ -4947,12 +4946,10 @@ const part002 = startSketchOn('XZ')
await page.waitForTimeout(100) // this wait is needed for webkit - not sure why
await page
.getByRole('button', {
name: 'Constraints',
name: 'Length: open menu',
})
.click()
await page
.getByRole('button', { name: 'remove constraints', exact: true })
.click()
await page.getByRole('button', { name: 'remove constraints' }).click()
await page.getByText('line([39.13, 68.63], %)').click()
const activeLinesContent = await page.locator('.cm-activeLine').all()
@ -5013,11 +5010,11 @@ const part002 = startSketchOn('XZ')
await page.keyboard.up('Shift')
await page
.getByRole('button', {
name: 'Constraints',
name: 'Length: open menu',
})
.click()
await page
.getByRole('button', { name: 'perpendicular distance', exact: true })
.getByRole('button', { name: 'Perpendicular Distance' })
.click()
const createNewVariableCheckbox = page.getByTestId(
@ -5112,12 +5109,10 @@ const part002 = startSketchOn('XZ')
await page.keyboard.up('Shift')
await page
.getByRole('button', {
name: 'Constraints',
name: 'Length: open menu',
})
.click()
await page
.getByRole('button', { name: constraint, exact: true })
.click()
await page.getByRole('button', { name: constraint }).click()
const createNewVariableCheckbox = page.getByTestId(
'create-new-variable-checkbox'
@ -5158,25 +5153,25 @@ const part002 = startSketchOn('XZ')
{
testName: 'Add variable',
addVariable: true,
constraint: 'ABS X',
constraint: 'Absolute X',
value: 'xDis001, 61.34',
},
{
testName: 'No variable',
addVariable: false,
constraint: 'ABS X',
constraint: 'Absolute X',
value: '154.9, 61.34',
},
{
testName: 'Add variable',
addVariable: true,
constraint: 'ABS Y',
constraint: 'Absolute Y',
value: '154.9, yDis001',
},
{
testName: 'No variable',
addVariable: false,
constraint: 'ABS Y',
constraint: 'Absolute Y',
value: '154.9, 61.34',
},
] as const
@ -5212,7 +5207,7 @@ const part002 = startSketchOn('XZ')
u.getSegmentBodyCoords(`[data-overlay-index="${2}"]`),
])
if (constraint === 'ABS X') {
if (constraint === 'Absolute X') {
await page.mouse.click(600, 130)
} else {
await page.mouse.click(900, 250)
@ -5223,7 +5218,7 @@ const part002 = startSketchOn('XZ')
await page.keyboard.up('Shift')
await page
.getByRole('button', {
name: 'Constraints',
name: 'Length: open menu',
})
.click()
await page
@ -5331,10 +5326,10 @@ const part002 = startSketchOn('XZ')
await page.keyboard.up('Shift')
await page
.getByRole('button', {
name: 'Constraints',
name: 'Length: open menu',
})
.click()
await page.getByTestId('angle').click()
await page.getByTestId('dropdown-constraint-angle').click()
const createNewVariableCheckbox = page.getByTestId(
'create-new-variable-checkbox'
@ -5432,10 +5427,10 @@ const part002 = startSketchOn('XZ')
await page.mouse.click(line3.x, line3.y)
await page
.getByRole('button', {
name: 'Constraints',
name: 'Length: open menu',
})
.click()
await page.getByTestId(constraint).click()
await page.getByTestId('dropdown-constraint-' + constraint).click()
if (!addVariable) {
await page.getByTestId('create-new-variable-checkbox').click()
@ -5523,7 +5518,7 @@ const part002 = startSketchOn('XZ')
await expect(activeLinesContent).toHaveLength(codeAfter.length)
const constraintMenuButton = page.getByRole('button', {
name: 'Constraints',
name: 'Length: open menu',
})
const constraintButton = page
.getByRole('button', {
@ -5606,7 +5601,7 @@ const part002 = startSketchOn('XZ')
await page.mouse.click(line3.x - 3, line3.y + 20)
await page.keyboard.up('Shift')
const constraintMenuButton = page.getByRole('button', {
name: 'Constraints',
name: 'Length: open menu',
})
const constraintButton = page.getByRole('button', {
name: constraintName,
@ -5683,7 +5678,7 @@ const part002 = startSketchOn('XZ')
await page.mouse.click(axisClick.x, axisClick.y)
await page.keyboard.up('Shift')
const constraintMenuButton = page.getByRole('button', {
name: 'Constraints',
name: 'Length: open menu',
})
const constraintButton = page.getByRole('button', {
name: constraintName,
@ -5742,10 +5737,10 @@ const part002 = startSketchOn('XZ')
await page
.getByRole('button', {
name: 'Constraints',
name: 'Length: open menu',
})
.click()
await page.getByRole('button', { name: 'horizontal', exact: true }).click()
await page.getByRole('button', { name: 'Horizontal', exact: true }).click()
let activeLinesContent = await page.locator('.cm-activeLine').all()
await expect(activeLinesContent[0]).toHaveText(`|> xLine(3.13, %)`)
@ -5766,13 +5761,13 @@ const part002 = startSketchOn('XZ')
await page.waitForTimeout(300)
await page
.getByRole('button', {
name: 'Constraints',
name: 'Length: open menu',
})
.click()
// await expect(page.getByRole('button', { name: 'length', exact: true })).toBeVisible()
await page.waitForTimeout(200)
// await page.getByRole('button', { name: 'length', exact: true }).click()
await page.locator('[data-testid="length"]').click()
await page.getByTestId('dropdown-constraint-length').click()
await page.getByLabel('length Value').fill('10')
await page.getByRole('button', { name: 'Add constraining value' }).click()
@ -7064,6 +7059,8 @@ test.describe('Test network and connection issues', () => {
await u.waitForAuthSkipAppStart()
const networkToggle = page.getByTestId('network-toggle')
// This is how we wait until the stream is online
await expect(
page.getByRole('button', { name: 'Start Sketch' })
@ -7077,7 +7074,7 @@ test.describe('Test network and connection issues', () => {
await expect(networkPopover).not.toBeVisible()
// (First check) Expect the network to be up
await expect(page.getByText('Network Health (Connected)')).toBeVisible()
await expect(networkToggle).toContainText('Connected')
// Click the network widget
await networkWidget.click()
@ -7099,7 +7096,7 @@ test.describe('Test network and connection issues', () => {
})
// Expect the network to be down
await expect(page.getByText('Network Health (Offline)')).toBeVisible()
await expect(networkToggle).toContainText('Offline')
// Click the network widget
await networkWidget.click()
@ -7125,7 +7122,7 @@ test.describe('Test network and connection issues', () => {
).not.toBeDisabled({ timeout: 15000 })
// (Second check) expect the network to be up
await expect(page.getByText('Network Health (Connected)')).toBeVisible()
await expect(networkToggle).toContainText('Connected')
})
test('Engine disconnect & reconnect in sketch mode', async ({
@ -7137,6 +7134,8 @@ test.describe('Test network and connection issues', () => {
browserName === 'webkit',
'Skip on Safari until `window.tearDown` is working there'
)
const networkToggle = page.getByTestId('network-toggle')
const u = await getUtils(page)
await page.setViewportSize({ width: 1200, height: 500 })
const PUR = 400 / 37.5 //pixeltoUnitRatio
@ -7179,7 +7178,7 @@ test.describe('Test network and connection issues', () => {
|> line([${commonPoints.num1}, 0], %)`)
// Expect the network to be up
await expect(page.getByText('Network Health (Connected)')).toBeVisible()
await expect(networkToggle).toContainText('Connected')
// simulate network down
await u.emulateNetworkConditions({
@ -7191,7 +7190,7 @@ test.describe('Test network and connection issues', () => {
})
// Expect the network to be down
await expect(page.getByText('Network Health (Offline)')).toBeVisible()
await expect(networkToggle).toContainText('Offline')
// Ensure we are not in sketch mode
await expect(
@ -7216,7 +7215,7 @@ test.describe('Test network and connection issues', () => {
).not.toBeDisabled({ timeout: 15000 })
// Expect the network to be up
await expect(page.getByText('Network Health (Connected)')).toBeVisible()
await expect(networkToggle).toContainText('Connected')
await expect(page.getByTestId('loading-stream')).not.toBeAttached()
// Click off the code pane.
@ -7233,7 +7232,7 @@ test.describe('Test network and connection issues', () => {
await page.waitForTimeout(150)
// Click the line tool
await page.getByRole('button', { name: 'Line' }).click()
await page.getByRole('button', { name: 'Line', exact: true }).click()
await page.waitForTimeout(150)
@ -7260,7 +7259,7 @@ test.describe('Test network and connection issues', () => {
page.getByRole('button', { name: 'Exit Sketch' })
).toBeVisible()
await expect(
page.getByRole('button', { name: 'Line' })
page.getByRole('button', { name: 'Line', exact: true })
).not.toHaveAttribute('aria-pressed', 'true')
// Exit sketch
@ -7665,7 +7664,7 @@ test('Keyboard shortcuts can be viewed through the help menu', async ({
.waitFor({ state: 'visible' })
// Open the help menu
await page.getByRole('button', { name: 'Help', exact: false }).click()
await page.getByRole('button', { name: 'Help and resources' }).click()
// Open the keyboard shortcuts
await page.getByRole('button', { name: 'Keyboard Shortcuts' }).click()
@ -7689,8 +7688,11 @@ test('First escape in tool pops you out of tool, second exits sketch mode', asyn
await u.expectCmdLog('[data-message-type="execution-done"]')
await u.closeDebugPanel()
const lineButton = page.getByRole('button', { name: 'Line' })
const arcButton = page.getByRole('button', { name: 'Tangential Arc' })
const lineButton = page.getByRole('button', { name: 'Line', exact: true })
const arcButton = page.getByRole('button', {
name: 'Tangential Arc',
exact: true,
})
// Test these hotkeys perform actions when
// focus is on the canvas
@ -7702,6 +7704,7 @@ test('First escape in tool pops you out of tool, second exits sketch mode', asyn
await page.mouse.move(800, 300)
await page.mouse.click(800, 300)
await page.waitForTimeout(1000)
await expect(lineButton).toBeVisible()
await expect(lineButton).toHaveAttribute('aria-pressed', 'true')
// Draw a line
@ -7771,9 +7774,12 @@ test('Basic default modeling and sketch hotkeys work', async ({ page }) => {
await u.closeDebugPanel()
const codePane = page.getByRole('textbox').locator('div')
const codePaneButton = page.getByTestId('KCL Code')
const lineButton = page.getByRole('button', { name: 'Line' })
const arcButton = page.getByRole('button', { name: 'Tangential Arc' })
const codePaneButton = page.getByTestId('code-pane-button')
const lineButton = page.getByRole('button', { name: 'Line', exact: true })
const arcButton = page.getByRole('button', {
name: 'Tangential Arc',
exact: true,
})
const extrudeButton = page.getByRole('button', { name: 'Extrude' })
// Test that the hotkeys do nothing when
@ -7794,7 +7800,7 @@ test('Basic default modeling and sketch hotkeys work', async ({ page }) => {
await page.mouse.click(600, 250)
// work-around: to stop "keyboard.press('s')" from typing in the editor even when it should be blurred
await page.getByRole('button', { name: 'Commands ⌘K' }).click()
await page.getByRole('button', { name: 'Commands' }).click()
await page.waitForTimeout(100)
await page.keyboard.press('Escape')
await page.waitForTimeout(100)