feat: add root pinboard & rename pivots to pinboard (#1843)

tests/libs/utils.ts

@@ -1,3 +1,4 @@
+import type { PageMeta } from '@blocksuite/store';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 
@@ -123,3 +124,9 @@ export async function loginUser(
 export async function openHomePage(page: Page) {
   return page.goto('http://localhost:8080');
 }
+
+export async function getMetas(page: Page): Promise<PageMeta[]> {
+  return page.evaluate(
+    () => globalThis.currentWorkspace.blockSuiteWorkspace.meta.pageMetas ?? []
+  );
+}

tests/parallels/pin-board.spec.ts

@@ -4,8 +4,9 @@ import { expect } from '@playwright/test';
 import { openHomePage } from '../libs/load-page';
 import { clickPageMoreActions, newPage } from '../libs/page-logic';
 import { test } from '../libs/playwright';
+import { getMetas } from '../libs/utils';
 
-async function createRootPage(page: Page, title: string) {
+async function createPinboardPage(page: Page, parentId: string, title: string) {
   await newPage(page);
   await page.focus('.affine-default-page-block-title');
   await page.type('.affine-default-page-block-title', title, {
@@ -13,73 +14,249 @@ async function createRootPage(page: Page, title: string) {
   });
   await clickPageMoreActions(page);
   await page.getByTestId('move-to-menu-item').click();
-  await page.getByTestId('root-pivot-button-in-pivots-menu').click();
+  await page
+    .getByTestId('pinboard-menu')
+    .getByTestId(`pinboard-${parentId}`)
+    .click();
 }
-async function createPivotPage(page: Page, title: string, parentTitle: string) {
-  await newPage(page);
-  await page.focus('.affine-default-page-block-title');
-  await page.type('.affine-default-page-block-title', title, {
-    delay: 100,
-  });
-  await clickPageMoreActions(page);
-  await page.getByTestId('move-to-menu-item').click();
-  await page.getByTestId('pivots-menu').getByText(parentTitle).click();
-}
-export async function initPinBoard(page: Page) {
+
+async function initHomePageWithPinboard(page: Page) {
   await openHomePage(page);
-  await createRootPage(page, 'parent1');
-  await createRootPage(page, 'parent2');
-  await createPivotPage(page, 'child1', 'parent1');
-  await createPivotPage(page, 'child2', 'parent1');
+  await page.waitForSelector('[data-testid="sidebar-pinboard-container"]');
+  return (await getMetas(page)).find(m => m.isRootPinboard);
 }
+
+async function openPinboardPageOperationMenu(page: Page, id: string) {
+  const node = await page
+    .getByTestId('sidebar-pinboard-container')
+    .getByTestId(`pinboard-${id}`);
+  await node.hover();
+  await node.getByTestId('pinboard-operation-button').click();
+}
+
 test.describe('PinBoard interaction', () => {
-  test('Add pivot', async ({ page }) => {
-    await initPinBoard(page);
+  test('Have initial root pinboard page when first in', async ({ page }) => {
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
+    expect(rootPinboardMeta).not.toBeUndefined();
   });
-  test('Remove pivots', async ({ page }) => {
-    await initPinBoard(page);
 
-    const child2Meta = await page.evaluate(() => {
-      return globalThis.currentWorkspace.blockSuiteWorkspace.meta.pageMetas.find(
-        m => m.title === 'child2'
-      );
-    });
-
-    const child2 = await page
-      .getByTestId('sidebar-pivots-container')
-      .getByTestId(`pivot-${child2Meta?.id}`);
-    await child2.hover();
-    await child2.getByTestId('pivot-operation-button').click();
-    await page.getByTestId('pivot-operation-move-to').click();
-    await page.getByTestId('remove-from-pivots-button').click();
-    await page.waitForTimeout(1000);
+  test('Root pinboard page have no operation of "trash" ,"rename" and "move to"', async ({
+    page,
+  }) => {
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
+    await openPinboardPageOperationMenu(page, rootPinboardMeta?.id ?? '');
     expect(
-      await page.locator(`[data-testid="pivot-${child2Meta.id}"]`).count()
+      await page
+        .locator(`[data-testid="pinboard-operation-move-to-trash"]`)
+        .count()
+    ).toEqual(0);
+    expect(
+      await page.locator(`[data-testid="pinboard-operation-rename"]`).count()
+    ).toEqual(0);
+    expect(
+      await page.locator(`[data-testid="pinboard-operation-move-to"]`).count()
     ).toEqual(0);
   });
 
-  test('search pivot', async ({ page }) => {
-    await initPinBoard(page);
+  test('Click Pinboard in sidebar should open root pinboard page', async ({
+    page,
+  }) => {
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
+    await page.getByTestId(`pinboard-${rootPinboardMeta?.id}`).click();
+    await page.waitForTimeout(200);
+    expect(await page.locator('affine-editor-container')).not.toBeNull();
+  });
 
-    const child2Meta = await page.evaluate(() => {
-      return globalThis.currentWorkspace.blockSuiteWorkspace.meta.pageMetas.find(
-        m => m.title === 'child2'
-      );
-    });
+  test('Add pinboard by header operation menu', async ({ page }) => {
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
+    await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test1');
+    const meta = (await getMetas(page)).find(m => m.title === 'test1');
+    expect(meta).not.toBeUndefined();
+    expect(
+      await page
+        .getByTestId('[data-testid="sidebar-pinboard-container"]')
+        .getByTestId(`pinboard-${meta?.id}`)
+    ).not.toBeNull();
+  });
 
-    const child2 = await page
-      .getByTestId('sidebar-pivots-container')
-      .getByTestId(`pivot-${child2Meta?.id}`);
-    await child2.hover();
-    await child2.getByTestId('pivot-operation-button').click();
-    await page.getByTestId('pivot-operation-move-to').click();
+  test('Add pinboard by sidebar operation menu', async ({ page }) => {
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
 
-    await page.fill('[data-testid="pivots-menu-search"]', '111');
+    await openPinboardPageOperationMenu(page, rootPinboardMeta?.id ?? '');
+    await page.getByTestId('pinboard-operation-add').click();
+    const newPageMeta = (await getMetas(page)).find(
+      m => m.id !== rootPinboardMeta?.id
+    );
+    expect(
+      await page
+        .getByTestId('sidebar-pinboard-container')
+        .getByTestId(`pinboard-${newPageMeta?.id}`)
+    ).not.toBeNull();
+  });
+
+  test('Move pinboard to another in sidebar', async ({ page }) => {
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
+    await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test1');
+    await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test2');
+    const childMeta = (await getMetas(page)).find(m => m.title === 'test1');
+    const childMeta2 = (await getMetas(page)).find(m => m.title === 'test2');
+    await openPinboardPageOperationMenu(page, childMeta?.id ?? '');
+    await page.getByTestId('pinboard-operation-move-to').click();
+    await page
+      .getByTestId('pinboard-menu')
+      .getByTestId(`pinboard-${childMeta2?.id}`)
+      .click();
+    expect(
+      (await getMetas(page)).find(m => m.title === 'test2')?.subpageIds.length
+    ).toBe(1);
+  });
+
+  test('Should no show pinboard self in move to menu', async ({ page }) => {
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
+    await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test1');
+    await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test2');
+    const childMeta = (await getMetas(page)).find(m => m.title === 'test1');
+    const childMeta2 = (await getMetas(page)).find(m => m.title === 'test2');
+
+    await page.getByTestId('all-pages').click();
+    await page
+      .getByTestId(`page-list-item-${childMeta?.id}`)
+      .getByTestId('page-list-operation-button')
+      .click();
+    await page.getByTestId('move-to-menu-item').click();
+
+    expect(
+      await page
+        .getByTestId('pinboard-menu')
+        .locator(`[data-testid="pinboard-${childMeta?.id}"]`)
+        .count()
+    ).toEqual(0);
+  });
+  test('Move pinboard to another in page list', async ({ page }) => {
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
+    await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test1');
+    await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test2');
+    const childMeta = (await getMetas(page)).find(m => m.title === 'test1');
+    const childMeta2 = (await getMetas(page)).find(m => m.title === 'test2');
+
+    await page.getByTestId('all-pages').click();
+    await page
+      .getByTestId(`page-list-item-${childMeta?.id}`)
+      .getByTestId('page-list-operation-button')
+      .click();
+    await page.getByTestId('move-to-menu-item').click();
+    await page
+      .getByTestId('pinboard-menu')
+      .getByTestId(`pinboard-${childMeta2?.id}`)
+      .click();
+    expect(
+      (await getMetas(page)).find(m => m.title === 'test2')?.subpageIds.length
+    ).toBe(1);
+  });
+
+  test('Remove from pinboard', async ({ page }) => {
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
+    await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test1');
+    const childMeta = (await getMetas(page)).find(m => m.title === 'test1');
+
+    await openPinboardPageOperationMenu(page, childMeta?.id ?? '');
+
+    await page.getByTestId('pinboard-operation-move-to').click();
+    await page.getByTestId('remove-from-pinboard-button').click();
+    await page.waitForTimeout(1000);
+    expect(
+      await page.locator(`[data-testid="pinboard-${childMeta?.id}"]`).count()
+    ).toEqual(0);
+  });
+
+  test('search pinboard', async ({ page }) => {
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
+    await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test1');
+    const childMeta = (await getMetas(page)).find(m => m.title === 'test1');
+
+    await openPinboardPageOperationMenu(page, childMeta?.id ?? '');
+
+    await page.getByTestId('pinboard-operation-move-to').click();
+
+    await page.fill('[data-testid="pinboard-menu-search"]', '111');
     expect(await page.locator('[alt="no result"]').count()).toEqual(1);
 
-    await page.fill('[data-testid="pivots-menu-search"]', 'parent2');
+    await page.fill('[data-testid="pinboard-menu-search"]', 'test1');
     expect(
-      await page.locator('[data-testid="pivot-search-result"]').count()
+      await page.locator('[data-testid="pinboard-search-result"]').count()
     ).toEqual(1);
   });
+
+  test('Rename pinboard', async ({ page }) => {
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
+    await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test1');
+    const childMeta = (await getMetas(page)).find(m => m.title === 'test1');
+
+    await openPinboardPageOperationMenu(page, childMeta?.id ?? '');
+
+    await page.getByTestId('pinboard-operation-rename').click();
+    await page.fill(`[data-testid="pinboard-input-${childMeta?.id}"]`, 'test2');
+
+    const title = (await page
+      .locator('.affine-default-page-block-title')
+      .textContent()) as string;
+
+    expect(title).toEqual('test2');
+  });
+
+  test('Move pinboard to trash', async ({ page }) => {
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
+    await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test1');
+    const childMeta = (await getMetas(page)).find(m => m.title === 'test1');
+    await createPinboardPage(page, childMeta?.id ?? '', 'test2');
+    const grandChildMeta = (await getMetas(page)).find(
+      m => m.title === 'test2'
+    );
+
+    await openPinboardPageOperationMenu(page, childMeta?.id ?? '');
+
+    await page.getByTestId('pinboard-operation-move-to-trash').click();
+    (
+      await page.waitForSelector('[data-testid="move-to-trash-confirm"]')
+    ).click();
+    await page.waitForTimeout(1000);
+
+    expect(
+      await page
+        .getByTestId('sidebar-pinboard-container')
+        .locator(`[data-testid="pinboard-${childMeta?.id}"]`)
+        .count()
+    ).toEqual(0);
+
+    expect(
+      await page
+        .getByTestId('sidebar-pinboard-container')
+        .locator(`[data-testid="pinboard-${grandChildMeta?.id}"]`)
+        .count()
+    ).toEqual(0);
+  });
+
+  // FIXME
+  test.skip('Copy link', async ({ page }) => {
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
+    await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test1');
+    const childMeta = (await getMetas(page)).find(m => m.title === 'test1');
+
+    await openPinboardPageOperationMenu(page, childMeta?.id ?? '');
+
+    await page.getByTestId('copy-link').click();
+
+    await page.evaluate(() => {
+      const input = document.createElement('input');
+      input.id = 'paste-input';
+      document.body.appendChild(input);
+      input.focus();
+    });
+    await page.keyboard.press(`Meta+v`, { delay: 50 });
+    await page.keyboard.press(`Control+v`, { delay: 50 });
+    const copiedValue = await page
+      .locator('#paste-input')
+      .evaluate((input: HTMLInputElement) => input.value);
+    expect(copiedValue).toEqual(page.url());
+  });
 });