feat(core): init organize (#7456)

tests/affine-cloud/e2e/collaboration.spec.ts

@@ -118,7 +118,7 @@ test('can sync collections between different browser', async ({
     page
   );
   await enableCloudWorkspace(page);
-  await page.getByTestId('slider-bar-add-collection-button').click();
+  await page.getByTestId('explorer-bar-add-collection-button').click();
   const title = page.getByTestId('input-collection-title');
   await title.isVisible();
   await title.fill('test collection');
@@ -130,7 +130,7 @@ test('can sync collections between different browser', async ({
     const page2 = await context.newPage();
     await loginUser(page2, user.email);
     await page2.goto(page.url());
-    const collections = page2.getByTestId('collections');
+    const collections = page2.getByTestId('explorer-collections');
     await expect(collections.getByText('test collection')).toBeVisible();
   }
 });

tests/affine-local/e2e/doc-info-modal.spec.ts

@@ -89,15 +89,15 @@ test('New a page and add to favourites, then open info modal from sidebar', asyn
   await page.getByTestId('editor-option-menu-favorite').click();
 
   await page.getByTestId('all-pages').click();
-  const favoriteListItemInSidebar = page.getByTestId(
-    'favourite-page-' + newPageId
+  const favoriteListItemInSidebar = page.locator(
+    `[data-testid="explorer-favorites"] [data-testid="explorer-doc-${newPageId}"]`
   );
   expect(await favoriteListItemInSidebar.textContent()).toBe(
     'this is a new page'
   );
   await favoriteListItemInSidebar.hover();
   await favoriteListItemInSidebar
-    .getByTestId('left-sidebar-page-operation-button')
+    .getByTestId('explorer-tree-node-operation-button')
     .click();
   const infoBtn = page.getByText('View Info');
   await infoBtn.click();

tests/affine-local/e2e/drag-page.spec.ts

@@ -15,32 +15,25 @@ const dragToFavourites = async (
   page: Page,
   dragItem: Locator,
   id: string,
-  type: 'page' | 'collection' = 'page'
+  type: 'doc' | 'collection' | 'tag' | 'folder' = 'doc'
 ) => {
-  const favourites = page.getByTestId('favourites');
+  const favourites = page.getByTestId('explorer-favorite-category-divider');
   await dragTo(page, dragItem, favourites);
-  if (type === 'collection') {
-    const collection = page
-      .getByTestId(`favourites`)
-      .locator(`[data-collection-id="${id}"]`);
-    await expect(collection).toBeVisible();
-    return collection;
-  } else {
-    const favouritePage = page.getByTestId(`favourite-page-${id}`);
-    await expect(favouritePage).toBeVisible();
-    return favouritePage;
-  }
+  const item = page
+    .getByTestId(`explorer-favorites`)
+    .locator(`[data-testid="explorer-${type}-${id}"]`);
+  await expect(item).toBeVisible();
+  return item;
 };
 
 const createCollection = async (page: Page, name: string) => {
-  await page.getByTestId('slider-bar-add-collection-button').click();
+  await page.getByTestId('explorer-bar-add-collection-button').click();
   const input = page.getByTestId('input-collection-title');
   await expect(input).toBeVisible();
   await input.fill(name);
   await page.getByTestId('save-collection').click();
-  const collection = page.locator(
-    `[data-testid=collection-item]:has-text("${name}")`
-  );
+  const newCollectionId = page.url().split('/').reverse()[0];
+  const collection = page.getByTestId(`explorer-collection-${newCollectionId}`);
   await expect(collection).toBeVisible();
   return collection;
 };
@@ -55,8 +48,7 @@ const dragToCollection = async (page: Page, dragItem: Locator) => {
   await clickSideBarAllPageButton(page);
   await dragTo(page, dragItem, collection);
   await page.waitForTimeout(500);
-  await collection.getByTestId('fav-collapsed-button').click();
-  const collectionPage = page.getByTestId('collection-page');
+  const collectionPage = collection.locator('[data-testid^="explorer-doc-"]');
   await expect(collectionPage).toBeVisible();
   return collectionPage;
 };
@@ -99,7 +91,7 @@ test('drag a page from "All pages" list to favourites, then drag to trash', asyn
 
   const favouritePage = await dragToFavourites(
     page,
-    page.locator(`[role="button"]:has-text("${title}")`),
+    page.locator(`[data-testid="page-list-item"]:has-text("${title}")`),
     pageId
   );
 
@@ -117,7 +109,7 @@ test('drag a page from "All pages" list to collections, then drag to trash', asy
 
   const collectionPage = await dragToCollection(
     page,
-    page.locator(`[role="button"]:has-text("${title}")`)
+    page.locator(`[data-testid="page-list-item"]:has-text("${title}")`)
   );
 
   await dragToTrash(page, title, collectionPage);
@@ -133,7 +125,7 @@ test('drag a page from "All pages" list to trash', async ({ page }) => {
   await dragToTrash(
     page,
     title,
-    page.locator(`[role="button"]:has-text("${title}")`)
+    page.locator(`[data-testid="page-list-item"]:has-text("${title}")`)
   );
 });
 
@@ -148,7 +140,7 @@ test('drag a page from favourites to collection', async ({ page }) => {
   // drag to favourites
   const favouritePage = await dragToFavourites(
     page,
-    page.locator(`[role="button"]:has-text("${title}")`),
+    page.locator(`[data-testid="page-list-item"]:has-text("${title}")`),
     pageId
   );
 
@@ -160,9 +152,7 @@ test('drag a collection to favourites', async ({ page }) => {
   await clickSideBarAllPageButton(page);
   await page.waitForTimeout(500);
   const collection = await createCollection(page, 'test collection');
-  const collectionId = (await collection.getAttribute(
-    'data-collection-id'
-  )) as string;
+  const collectionId = page.url().split('/').reverse()[0];
   await dragToFavourites(page, collection, collectionId, 'collection');
 });
 
@@ -177,46 +167,44 @@ test('items in favourites can be reordered by dragging', async ({ page }) => {
 
   {
     const collection = await createCollection(page, 'test collection');
-    const collectionId = (await collection.getAttribute(
-      'data-collection-id'
-    )) as string;
+    const collectionId = page.url().split('/').reverse()[0];
     await dragToFavourites(page, collection, collectionId, 'collection');
   }
 
   // assert the order of the items in favourites
   await expect(
-    page.getByTestId('favourites').locator('[data-draggable]')
+    page.getByTestId('explorer-favorites').locator('[draggable]')
   ).toHaveCount(3);
 
   await expect(
-    page.getByTestId('favourites').locator('[data-draggable]').first()
+    page.getByTestId('explorer-favorites').locator('[draggable]').first()
   ).toHaveText(title0);
 
   await expect(
-    page.getByTestId('favourites').locator('[data-draggable]').last()
+    page.getByTestId('explorer-favorites').locator('[draggable]').last()
   ).toHaveText('test collection');
 
   // drag the first item to the last
   const firstItem = page
-    .getByTestId('favourites')
-    .locator('[data-draggable]')
+    .getByTestId('explorer-favorites')
+    .locator('[draggable]')
     .first();
   const lastItem = page
-    .getByTestId('favourites')
-    .locator('[data-draggable]')
+    .getByTestId('explorer-favorites')
+    .locator('[draggable]')
     .last();
-  await dragTo(page, firstItem, lastItem);
+  await dragTo(page, firstItem, lastItem, 'bottom');
 
   // now check the order again
   await expect(
-    page.getByTestId('favourites').locator('[data-draggable]')
+    page.getByTestId('explorer-favorites').locator('[draggable]')
   ).toHaveCount(3);
 
   await expect(
-    page.getByTestId('favourites').locator('[data-draggable]').first()
+    page.getByTestId('explorer-favorites').locator('[draggable]').first()
   ).toHaveText(title1);
 
   await expect(
-    page.getByTestId('favourites').locator('[data-draggable]').last()
+    page.getByTestId('explorer-favorites').locator('[draggable]').last()
   ).toHaveText(title0);
 });

tests/affine-local/e2e/local-first-collections-items.spec.ts

@@ -64,24 +64,24 @@ const createAndPinCollection = async (
 test('Show collections items in sidebar', async ({ page }) => {
   await removeOnboardingPages(page);
   await createAndPinCollection(page);
-  const collections = page.getByTestId('collections');
-  const items = collections.getByTestId('collection-item');
+  const collections = page.getByTestId('explorer-collections');
+  const items = collections.locator('[data-testid^="explorer-collection-"]');
   expect(await items.count()).toBe(1);
   const first = items.first();
   expect(await first.textContent()).toBe('test collection');
-  await first.getByTestId('fav-collapsed-button').click();
-  const collectionPage = collections.getByTestId('collection-page').nth(0);
+  await first.getByTestId('explorer-collapsed-button').click();
+  const collectionPage = first.locator('[data-testid^="explorer-doc-"]').nth(0);
   expect(await collectionPage.textContent()).toBe('test page');
   await collectionPage.hover();
   await collectionPage
-    .getByTestId('left-sidebar-page-operation-button')
+    .getByTestId('explorer-tree-node-operation-button')
     .click();
   const deletePage = page.getByText('Move to Trash');
   await deletePage.click();
-  await page.getByTestId('confirm-delete-page').click();
-  expect(await collections.getByTestId('collection-page').count()).toBe(0);
+  await page.getByTestId('confirm-modal-confirm').click();
+  expect(await first.locator('[data-testid^="explorer-doc-"]').count()).toBe(0);
   await first.hover();
-  await first.getByTestId('collection-options').click();
+  await first.getByTestId('explorer-tree-node-operation-button').click();
   const deleteCollection = page.getByText('Delete');
   await deleteCollection.click();
   await page.waitForTimeout(50);
@@ -104,12 +104,12 @@ test('Show collections items in sidebar', async ({ page }) => {
 test('edit collection', async ({ page }) => {
   await removeOnboardingPages(page);
   await createAndPinCollection(page);
-  const collections = page.getByTestId('collections');
-  const items = collections.getByTestId('collection-item');
+  const collections = page.getByTestId('explorer-collections');
+  const items = collections.locator('[data-testid^="explorer-collection-"]');
   expect(await items.count()).toBe(1);
   const first = items.first();
   await first.hover();
-  await first.getByTestId('collection-options').click();
+  await first.getByTestId('explorer-tree-node-operation-button').click();
   const editCollection = page.getByText('Rename');
   await editCollection.click();
   await page.getByTestId('rename-modal-input').fill('123');
@@ -121,15 +121,13 @@ test('edit collection', async ({ page }) => {
 test('edit collection and change filter date', async ({ page }) => {
   await removeOnboardingPages(page);
   await createAndPinCollection(page);
-  const collections = page.getByTestId('collections');
-  const items = collections.getByTestId('collection-item');
+  const collections = page.getByTestId('explorer-collections');
+  const items = collections.locator('[data-testid^="explorer-collection-"]');
   expect(await items.count()).toBe(1);
   const first = items.first();
   await first.hover();
-  await first.getByTestId('collection-options').click();
-  const editCollection = page
-    .getByTestId('collection-option')
-    .getByText('Rename');
+  await first.getByTestId('explorer-tree-node-operation-button').click();
+  const editCollection = page.getByText('Rename');
   await editCollection.click();
   await page.getByTestId('rename-modal-input').fill('123');
   await page.keyboard.press('Enter');
@@ -146,17 +144,17 @@ test('add collection from sidebar', async ({ page }) => {
   const cell = page.getByTestId('page-list-item-title').getByText('test page');
   await expect(cell).toBeVisible();
   const nullCollection = page.getByTestId(
-    'slider-bar-collection-null-description'
+    'slider-bar-collection-empty-message'
   );
   await expect(nullCollection).toBeVisible();
-  await page.getByTestId('slider-bar-add-collection-button').click();
+  await page.getByTestId('explorer-bar-add-collection-button').click();
   const title = page.getByTestId('input-collection-title');
   await expect(title).toBeVisible();
   await title.fill('test collection');
   await page.getByTestId('save-collection').click();
   await page.waitForTimeout(100);
-  const collections = page.getByTestId('collections');
-  const items = collections.getByTestId('collection-item');
+  const collections = page.getByTestId('explorer-collections');
+  const items = collections.locator('[data-testid^="explorer-collection-"]');
   expect(await items.count()).toBe(1);
   await expect(nullCollection).not.toBeVisible();
 });

tests/affine-local/e2e/local-first-favorites-items.spec.ts

@@ -28,7 +28,7 @@ test('Show favorite items in sidebar', async ({ page, workspace }) => {
   const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
   await favoriteBtn.click();
   const favoriteListItemInSidebar = page.getByTestId(
-    'favourite-page-' + newPageId
+    'explorer-doc-' + newPageId
   );
   expect(await favoriteListItemInSidebar.textContent()).toBe(
     'this is a new page to favorite'
@@ -57,21 +57,23 @@ test('Show favorite reference in sidebar', async ({ page, workspace }) => {
   const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
   await favoriteBtn.click();
 
-  const favItemTestId = 'favourite-page-' + newPageId;
+  const favItemTestId = 'explorer-doc-' + newPageId;
 
   const favoriteListItemInSidebar = page.getByTestId(favItemTestId);
   expect(await favoriteListItemInSidebar.textContent()).toBe(
     'this is a new page to favorite'
   );
 
-  const collapseButton = favoriteListItemInSidebar.locator(
-    '[data-testid="fav-collapsed-button"]'
+  const collapseButton = favoriteListItemInSidebar.getByTestId(
+    'explorer-collapsed-button'
   );
 
   await expect(collapseButton).toBeVisible();
   await collapseButton.click();
   await expect(
-    page.locator('[data-type="reference-page"] >> text=Another page')
+    favoriteListItemInSidebar.locator(
+      '[data-testid^="explorer-doc-"]:has-text("Another page")'
+    )
   ).toBeVisible();
   const currentWorkspace = await workspace.current();
 
@@ -80,7 +82,6 @@ test('Show favorite reference in sidebar', async ({ page, workspace }) => {
 
 test("Deleted page's reference will not be shown in sidebar", async ({
   page,
-  workspace,
 }) => {
   await openHomePage(page);
   await waitForEditorLoad(page);
@@ -109,7 +110,7 @@ test("Deleted page's reference will not be shown in sidebar", async ({
 
   const anotherPageId = page.url().split('/').reverse()[0];
 
-  const favItemTestId = 'favourite-page-' + newPageId;
+  const favItemTestId = 'explorer-doc-' + newPageId;
 
   await expect(page.getByTestId(favItemTestId)).toHaveText(
     'this is a new page to favorite'
@@ -117,12 +118,14 @@ test("Deleted page's reference will not be shown in sidebar", async ({
 
   await page
     .getByTestId(favItemTestId)
-    .locator('[data-testid="fav-collapsed-button"]')
+    .getByTestId('explorer-collapsed-button')
     .click();
 
-  const favItemAnotherPageTestId = 'reference-page-' + anotherPageId;
+  const favItemAnotherPageTestId = 'explorer-doc-' + anotherPageId;
 
-  await expect(page.getByTestId(favItemAnotherPageTestId)).toBeVisible();
+  await expect(
+    page.getByTestId(favItemTestId).getByTestId(favItemAnotherPageTestId)
+  ).toBeVisible();
 
   // delete the page
   await clickPageMoreActions(page);
@@ -133,17 +136,16 @@ test("Deleted page's reference will not be shown in sidebar", async ({
   // confirm delete
   await page.locator('button >> text=Delete').click();
 
-  await expect(page.getByTestId(favItemAnotherPageTestId)).toBeVisible();
-  const currentWorkspace = await workspace.current();
-
-  expect(currentWorkspace.meta.flavour).toContain('local');
+  await expect(
+    page.getByTestId(favItemTestId).getByTestId(favItemAnotherPageTestId)
+  ).toBeHidden();
 });
 
 test('Add new favorite page via sidebar', async ({ page }) => {
   await openHomePage(page);
   await waitForEditorLoad(page);
 
-  await page.getByTestId('slider-bar-add-favorite-button').first().click();
+  await page.getByTestId('explorer-bar-add-favorite-button').first().click();
   await clickPageModeButton(page);
   await waitForEmptyEditor(page);
 
@@ -151,7 +153,7 @@ test('Add new favorite page via sidebar', async ({ page }) => {
   await getBlockSuiteEditorTitle(page).fill('this is a new fav page');
   // check if the page title is shown in the favorite list
   const favItem = page
-    .getByTestId('favourites')
-    .locator('[data-draggable] >> text=this is a new fav page');
+    .getByTestId('explorer-favorites')
+    .locator('[draggable] >> text=this is a new fav page');
   await expect(favItem).toBeVisible();
 });

tests/kit/utils/editor.ts

@@ -12,7 +12,7 @@ export async function clickEdgelessModeButton(page: Page) {
 }
 
 export async function clickPageModeButton(page: Page) {
-  page.getByTestId('switch-page-mode-button').click({
+  await page.getByTestId('switch-page-mode-button').click({
     delay: 50,
   });
   await expect(

tests/kit/utils/page-logic.ts

@@ -71,16 +71,36 @@ export const getPageByTitle = (page: Page, title: string) => {
   return page.getByTestId('page-list-item').getByText(title);
 };
 
-export const dragTo = async (page: Page, locator: Locator, target: Locator) => {
+export const dragTo = async (
+  page: Page,
+  locator: Locator,
+  target: Locator,
+  location: 'top-left' | 'top' | 'bottom' | 'center' = 'center'
+) => {
   await locator.hover();
   await page.mouse.down();
-  await page.waitForTimeout(1000);
+  await page.mouse.move(1, 1);
+
   const targetElement = await target.boundingBox();
   if (!targetElement) {
     throw new Error('target element not found');
   }
-  await page.mouse.move(targetElement.x, targetElement.y);
-  await target.hover();
+  const position =
+    location === 'center'
+      ? {
+          x: targetElement.width / 2,
+          y: targetElement.height / 2,
+        }
+      : location === 'top-left'
+        ? { x: 1, y: 1 }
+        : location === 'top'
+          ? { x: targetElement.width / 2, y: 1 }
+          : location === 'bottom'
+            ? { x: targetElement.width / 2, y: targetElement.height - 1 }
+            : { x: 1, y: 1 };
+  await target.hover({
+    position: position,
+  });
   await page.mouse.up();
 };