chore(editor): remove edgeless element toolbar (#10900)

tests/affine-local/e2e/blocksuite/clipboard/clipboard.spec.ts

@@ -171,11 +171,10 @@ test('paste surface-ref block to another doc as embed-linked-doc block', async (
   const frameTitle = page.locator('affine-frame-title');
   await frameTitle.click();
   await page.waitForTimeout(50);
-  const changeFrameButton = page.locator('edgeless-change-frame-button');
-  // get insert into page button which with aria-label 'Insert into Page'
-  const insertIntoPageButton = changeFrameButton.locator(
-    `editor-icon-button[aria-label="Insert into Page"]`
-  );
+
+  const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+
+  const insertIntoPageButton = toolbar.getByLabel('Insert into Page');
   await insertIntoPageButton.click();
 
   await clickPageModeButton(page);

tests/affine-local/e2e/blocksuite/edgeless/embed.spec.ts

@@ -2,7 +2,7 @@ import { test } from '@affine-test/kit/playwright';
 import {
   clickEdgelessModeButton,
   locateEditorContainer,
-  locateElementToolbar,
+  locateToolbar,
 } from '@affine-test/kit/utils/editor';
 import { pressEnter } from '@affine-test/kit/utils/keyboard';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
@@ -31,7 +31,7 @@ test('should close embed editing modal when editor switching to page mode by sho
     .getByTestId('cmdk-label')
     .getByText('Write, Draw, Plan all at Once.')
     .click();
-  const toolbar = locateElementToolbar(page);
+  const toolbar = locateToolbar(page);
   await toolbar.getByLabel('Edit').click();
 
   const editingModal = page.locator('embed-card-edit-modal');

tests/affine-local/e2e/blocksuite/edgeless/frame.spec.ts

@@ -5,7 +5,7 @@ import {
   createEdgelessNoteBlock,
   dragView,
   locateEditorContainer,
-  locateElementToolbar,
+  locateToolbar,
   toViewCoord,
 } from '@affine-test/kit/utils/editor';
 import {
@@ -34,7 +34,7 @@ test.beforeEach(async ({ page }) => {
 test('should update zindex of element when moving it into frame', async ({
   page,
 }) => {
-  const toolbar = locateElementToolbar(page);
+  const toolbar = locateToolbar(page);
 
   // create a top frame
   await page.keyboard.press('f');
@@ -47,7 +47,7 @@ test('should update zindex of element when moving it into frame', async ({
   await createEdgelessNoteBlock(page, [500, 500]);
   await clickView(page, [0, 100]);
   await clickView(page, [500, 500]);
-  await toolbar.getByLabel('More').click();
+  await toolbar.getByLabel('more-menu').click();
   await toolbar.getByLabel('Send to Back').click();
   await pressEscape(page);
 

tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts

@@ -7,8 +7,8 @@ import {
   getPageMode,
   getSelectedXYWH,
   locateEditorContainer,
-  locateElementToolbar,
   locateModeSwitchButton,
+  locateToolbar,
   moveToView,
   resizeElementByHandle,
   toViewCoord,
@@ -201,8 +201,8 @@ test.describe('edgeless note element toolbar', () => {
     page,
   }) => {
     await selectAllByKeyboard(page);
-    const toolbar = locateElementToolbar(page);
-    const autoHeight = toolbar.getByTestId('edgeless-note-auto-height');
+    const toolbar = locateToolbar(page);
+    const autoHeight = toolbar.getByTestId('auto-height');
     const displayInPage = toolbar.getByTestId('display-in-page');
 
     await expect(toolbar).toBeVisible();
@@ -218,8 +218,8 @@ test.describe('edgeless note element toolbar', () => {
     await clickView(page, [0, 0]);
     await clickView(page, [100, 100]);
 
-    const toolbar = locateElementToolbar(page);
-    const autoHeight = toolbar.getByTestId('edgeless-note-auto-height');
+    const toolbar = locateToolbar(page);
+    const autoHeight = toolbar.getByTestId('auto-height');
     const displayInPage = toolbar.getByTestId('display-in-page');
 
     await expect(toolbar).toBeVisible();
@@ -237,7 +237,7 @@ test.describe('edgeless note element toolbar', () => {
     await clickView(page, [0, 0]);
     await clickView(page, [100, 100]);
 
-    const toolbar = locateElementToolbar(page);
+    const toolbar = locateToolbar(page);
     const displayInPage = toolbar.getByTestId('display-in-page');
 
     await displayInPage.click();
@@ -300,7 +300,7 @@ test.describe('edgeless note element toolbar', () => {
       }, noteId);
     };
 
-    const toolbar = locateElementToolbar(page);
+    const toolbar = locateToolbar(page);
 
     await selectAllByKeyboard(page);
     const noteId = (await getEdgelessSelectedIds(page))[0];
@@ -329,7 +329,11 @@ test.describe('edgeless note element toolbar', () => {
     await toolbar.getByRole('button', { name: 'Border style' }).click();
     await toolbar.locator('.mode-solid').click();
     await toolbar.getByRole('button', { name: 'Border style' }).click();
-    await toolbar.locator('edgeless-line-width-panel').getByLabel('8').click();
+    // TODO(@fundon): delete duplicate components
+    await toolbar
+      .locator('affine-edgeless-line-width-panel')
+      .getByLabel('8')
+      .click();
 
     expect(await getNoteEdgelessProps(page, noteId)).toEqual({
       style: {
@@ -341,7 +345,11 @@ test.describe('edgeless note element toolbar', () => {
     });
 
     await toolbar.getByRole('button', { name: 'Corners' }).click();
-    await toolbar.locator('edgeless-size-panel').getByText('Large').click();
+    // TODO(@fundon): delete duplicate components
+    await toolbar
+      .locator('affine-size-dropdown-menu')
+      .getByText('Large')
+      .click();
 
     expect(await getNoteEdgelessProps(page, noteId)).toEqual({
       style: {

tests/affine-local/e2e/blocksuite/edgeless/shape.spec.ts

@@ -35,9 +35,7 @@ test('should add text to shape, default to pure black', async ({ page }) => {
   await page.keyboard.type('text');
   await page.keyboard.press('Escape');
 
-  const toolbar = page.locator(
-    'edgeless-element-toolbar-widget editor-toolbar'
-  );
+  const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
   const textColorContainer = toolbar.locator(
     'edgeless-color-picker-button.text-color'
   );
@@ -76,9 +74,7 @@ test('should add text to shape with pure white', async ({ page }) => {
   await page.keyboard.type('text');
   await page.keyboard.press('Escape');
 
-  const toolbar = page.locator(
-    'edgeless-element-toolbar-widget editor-toolbar'
-  );
+  const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
   const textColorContainer = toolbar.locator(
     'edgeless-color-picker-button.text-color'
   );

tests/affine-local/e2e/blocksuite/outline/outline-panel.spec.ts

@@ -7,7 +7,7 @@ import {
   focusDocTitle,
   getEdgelessSelectedIds,
   getViewportCenter,
-  locateElementToolbar,
+  locateToolbar,
   setViewportCenter,
 } from '@affine-test/kit/utils/editor';
 import {
@@ -508,12 +508,10 @@ test.describe('advanced visibility control', () => {
     await expect(edgelessCard).toHaveCount(1);
 
     await clickView(page, [100, 100]);
-    const noteButtons = locateElementToolbar(page).locator(
-      'edgeless-change-note-button'
-    );
+    const toolbar = locateToolbar(page);
 
-    await noteButtons.getByRole('button', { name: 'Mode' }).click();
-    await noteButtons.locator('note-display-mode-panel .item.both').click();
+    await toolbar.getByRole('button', { name: 'Mode' }).click();
+    await toolbar.locator('note-display-mode-panel .item.both').click();
 
     await expect(bothCard).toHaveCount(2);
     await expect(edgelessCard).toHaveCount(0);
@@ -541,10 +539,8 @@ test.describe('advanced visibility control', () => {
     await expect(bothCard).toHaveCount(2);
 
     await clickView(page, [200, 100]);
-    const changeNoteButtons = locateElementToolbar(page).locator(
-      'edgeless-change-note-button'
-    );
-    await changeNoteButtons.getByRole('button', { name: 'Slicer' }).click();
+    const toolbar = locateToolbar(page);
+    await toolbar.getByRole('button', { name: 'Slicer' }).click();
     await expect(page.locator('.note-slicer-button')).toBeVisible();
     await page.locator('.note-slicer-button').click();
 

tests/affine-local/e2e/links.spec.ts

@@ -156,7 +156,7 @@ test('not allowed to switch to embed view when linking to block', async ({
 
   await cardLink.click();
 
-  await toolbar.getByLabel('More').click();
+  await toolbar.getByLabel('more-menu').click();
   await toolbar.getByLabel('Copy link to block').click();
 
   await page.keyboard.press('Enter');

tests/affine-local/e2e/peek-view.spec.ts

@@ -118,10 +118,10 @@ test('can open peek view for embedded frames', async ({ page }) => {
   // close affine-banner
   await page.locator('[data-testid=local-demo-tips-close-button]').click();
 
+  const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+
   // insert the frame to page
-  await page
-    .locator('edgeless-change-frame-button:has-text("Insert into Page")')
-    .click();
+  await toolbar.getByLabel('Insert into Page').click();
 
   // switch back to page mode
   await clickPageModeButton(page);