feat(core): drop doc onto split view (#9487)

fix AF-2068, AF-2069, AF-1175, AF-2061, AF-2079, AF-2034, AF-2080, AF-1960, AF-2081

1. replace `dnd-kit` with `@atlaskit/pragmatic-drag-and-drop`
2. allow creating split views by drag & drop the following
   a. WorkbenchLinks (route links), like journals, trash, all docs
   b. doc refs
   c. tags/collection
3. style adjustments to split view
4. remove split view's feature flag and make it GA for electron

https://github.com/user-attachments/assets/6a3e4a25-faa2-4215-8eb0-983f44db6e8c

tests/affine-desktop/e2e/split-view.spec.ts

@@ -0,0 +1,115 @@
+import { test } from '@affine-test/kit/electron';
+import {
+  expectActiveTab,
+  expectTabTitle,
+} from '@affine-test/kit/utils/app-tabs';
+import {
+  clickNewPageButton,
+  createLinkedPage,
+  dragTo,
+  waitForAllPagesLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { clickSideBarAllPageButton } from '@affine-test/kit/utils/sidebar';
+import { expect } from '@playwright/test';
+
+test('open split view', async ({ page }) => {
+  await clickNewPageButton(page);
+  await page.waitForTimeout(500);
+  await page.keyboard.press('Enter');
+  await createLinkedPage(page, 'hi from another page');
+  await page
+    .locator('.affine-reference-title:has-text("hi from another page")')
+    .click({
+      modifiers: ['ControlOrMeta', 'Alt'],
+    });
+  await expect(page.locator('.doc-title-container')).toHaveCount(2);
+
+  // check tab title
+  await expect(page.getByTestId('split-view-label')).toHaveCount(2);
+  await expectTabTitle(page, 0, ['Untitled', 'hi from another page']);
+
+  // the second split view should be active
+  await expectActiveTab(page, 0, 1);
+
+  // by clicking the first split view label, the first split view should be active
+  await page.getByTestId('split-view-label').nth(0).click();
+  await expectActiveTab(page, 0, 0);
+  await expect(page.getByTestId('split-view-indicator').nth(0)).toHaveAttribute(
+    'data-active',
+    'true'
+  );
+
+  const firstDragHandel = page
+    .getByTestId('split-view-panel')
+    .first()
+    .getByTestId('split-view-indicator');
+
+  await dragTo(
+    page,
+    firstDragHandel,
+    page.getByTestId('split-view-panel').last(),
+    'center',
+    true
+  );
+
+  await expectTabTitle(page, 0, ['hi from another page', 'Untitled']);
+});
+
+test('open split view in all docs (operations button)', async ({ page }) => {
+  const testTitle = 'test-page';
+  await clickNewPageButton(page, testTitle);
+  await clickSideBarAllPageButton(page);
+  await waitForAllPagesLoad(page);
+  await page
+    .getByTestId('page-list-item')
+    .filter({
+      hasText: testTitle,
+    })
+    .getByTestId('page-list-operation-button')
+    .click();
+  await page.getByRole('menuitem', { name: 'Open in Split View' }).click();
+  await expect(page.getByTestId('split-view-panel')).toHaveCount(2);
+  const targetPage = page.getByTestId('split-view-panel').last();
+  await expect(targetPage).toHaveAttribute('data-is-active', 'true');
+  await expect(targetPage.locator('.doc-title-container')).toBeVisible();
+  await expect(targetPage.locator('.doc-title-container')).toContainText(
+    testTitle
+  );
+});
+
+test('open split view in all docs (drag to resize handle)', async ({
+  page,
+}) => {
+  const testTitle = 'test-page';
+  await clickNewPageButton(page, testTitle);
+  await clickSideBarAllPageButton(page);
+  await waitForAllPagesLoad(page);
+
+  // case for AF-2061. toggle selection checkbox
+  await page.getByTestId('page-list-header-selection-checkbox').click();
+
+  const pageItem = page.getByTestId('page-list-item').filter({
+    hasText: testTitle,
+  });
+
+  const leftResizeHandle = page.getByTestId('resize-handle').first();
+
+  await dragTo(page, pageItem, leftResizeHandle, 'center');
+  await expectTabTitle(page, 0, ['test-page', 'All docs']);
+});
+
+test('creating split view by dragging sidebar journals', async ({ page }) => {
+  const journalButton = page.getByTestId('slider-bar-journals-button');
+  const leftResizeHandle = page.getByTestId('resize-handle').first();
+
+  await dragTo(page, journalButton, leftResizeHandle, 'center');
+  await expect(page.getByTestId('split-view-panel')).toHaveCount(2);
+  await expect(
+    page
+      .getByTestId('split-view-panel')
+      .filter({
+        has: page.locator('[data-is-first="true"]'),
+      })
+      .getByTestId('date-today-label')
+  ).toBeVisible();
+});

tests/affine-desktop/e2e/tabs.spec.ts

@@ -1,57 +1,17 @@
 import { test } from '@affine-test/kit/electron';
+import {
+  closeTab,
+  expectActiveTab,
+  expectTabCount,
+  expectTabTitle,
+} from '@affine-test/kit/utils/app-tabs';
 import {
   clickNewPageButton,
   createLinkedPage,
   dragTo,
 } from '@affine-test/kit/utils/page-logic';
 import { clickSideBarAllPageButton } from '@affine-test/kit/utils/sidebar';
-import { expect, type Page } from '@playwright/test';
-
-async function expectActiveTab(page: Page, index: number, activeViewIndex = 0) {
-  await expect(
-    page
-      .getByTestId('workbench-tab')
-      .nth(index)
-      .getByTestId('split-view-label')
-      .nth(activeViewIndex)
-  ).toHaveAttribute('data-active', 'true');
-}
-
-async function expectTabTitle(
-  page: Page,
-  index: number,
-  title: string | string[]
-) {
-  if (typeof title === 'string') {
-    await expect(page.getByTestId('workbench-tab').nth(index)).toContainText(
-      title
-    );
-  } else {
-    for (let i = 0; i < title.length; i++) {
-      await expect(
-        page
-          .getByTestId('workbench-tab')
-          .nth(index)
-          .getByTestId('split-view-label')
-          .nth(i)
-      ).toContainText(title[i]);
-    }
-  }
-}
-
-async function expectTabCount(page: Page, count: number) {
-  await expect(page.getByTestId('workbench-tab')).toHaveCount(count);
-}
-
-async function closeTab(page: Page, index: number) {
-  await page.getByTestId('workbench-tab').nth(index).hover();
-
-  await page
-    .getByTestId('workbench-tab')
-    .nth(index)
-    .getByTestId('close-tab-button')
-    .click();
-}
+import { expect } from '@playwright/test';
 
 test('create new tab', async ({ views }) => {
   let page = await views.getActive();
@@ -148,34 +108,6 @@ test('open new tab via cmd+click page link', async ({ page }) => {
   await expectActiveTab(page, 0);
 });
 
-test('open split view', async ({ page }) => {
-  await clickNewPageButton(page);
-  await page.waitForTimeout(500);
-  await page.keyboard.press('Enter');
-  await createLinkedPage(page, 'hi from another page');
-  await page
-    .locator('.affine-reference-title:has-text("hi from another page")')
-    .click({
-      modifiers: ['ControlOrMeta', 'Alt'],
-    });
-  await expect(page.locator('.doc-title-container')).toHaveCount(2);
-
-  // check tab title
-  await expect(page.getByTestId('split-view-label')).toHaveCount(2);
-  await expectTabTitle(page, 0, ['Untitled', 'hi from another page']);
-
-  // the second split view should be active
-  await expectActiveTab(page, 0, 1);
-
-  // by clicking the first split view label, the first split view should be active
-  await page.getByTestId('split-view-label').nth(0).click();
-  await expectActiveTab(page, 0, 0);
-  await expect(page.getByTestId('split-view-indicator').nth(0)).toHaveAttribute(
-    'data-active',
-    'true'
-  );
-});
-
 test('drag a page from "All pages" list to tabs header', async ({ page }) => {
   const title = 'this is a new page to drag';
   await clickNewPageButton(page, title);

tests/kit/src/utils/app-tabs.ts

@@ -0,0 +1,52 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+export async function expectActiveTab(
+  page: Page,
+  index: number,
+  activeViewIndex = 0
+) {
+  await expect(
+    page
+      .getByTestId('workbench-tab')
+      .nth(index)
+      .getByTestId('split-view-label')
+      .nth(activeViewIndex)
+  ).toHaveAttribute('data-active', 'true');
+}
+
+export async function expectTabTitle(
+  page: Page,
+  index: number,
+  title: string | string[]
+) {
+  if (typeof title === 'string') {
+    await expect(page.getByTestId('workbench-tab').nth(index)).toContainText(
+      title
+    );
+  } else {
+    for (let i = 0; i < title.length; i++) {
+      await expect(
+        page
+          .getByTestId('workbench-tab')
+          .nth(index)
+          .getByTestId('split-view-label')
+          .nth(i)
+      ).toContainText(title[i]);
+    }
+  }
+}
+
+export async function expectTabCount(page: Page, count: number) {
+  await expect(page.getByTestId('workbench-tab')).toHaveCount(count);
+}
+
+export async function closeTab(page: Page, index: number) {
+  await page.getByTestId('workbench-tab').nth(index).hover();
+
+  await page
+    .getByTestId('workbench-tab')
+    .nth(index)
+    .getByTestId('close-tab-button')
+    .click();
+}

tests/kit/src/utils/page-logic.ts

@@ -139,7 +139,8 @@ export const dragTo = async (
   page: Page,
   locator: Locator,
   target: Locator,
-  location: DragLocation = 'center'
+  location: DragLocation = 'center',
+  willMoveOnDrag = false
 ) => {
   await locator.hover();
   const locatorElement = await locator.boundingBox();
@@ -164,18 +165,20 @@ export const dragTo = async (
 
   await target.hover();
 
-  const targetElement = await target.boundingBox();
-  if (!targetElement) {
-    throw new Error('target element not found');
-  }
-  const targetPosition = toPosition(targetElement, location);
-  await page.mouse.move(
-    targetElement.x + targetPosition.x,
-    targetElement.y + targetPosition.y,
-    {
-      steps: 10,
+  if (!willMoveOnDrag) {
+    const targetElement = await target.boundingBox();
+    if (!targetElement) {
+      throw new Error('target element not found');
     }
-  );
+    const targetPosition = toPosition(targetElement, location);
+    await page.mouse.move(
+      targetElement.x + targetPosition.x,
+      targetElement.y + targetPosition.y,
+      {
+        steps: 10,
+      }
+    );
+  }
   await page.waitForTimeout(100);
   await page.mouse.up();
 };