feat(core): doc database properties (#8520)

fix AF-1454

1. move inline tags editor to components
2. add progress component
3. adjust doc properties styles for desktop
4. subscribe bs database links and display in doc info
5. move update/create dates to doc info
6. a trivial e2e test

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/eed266c1-fdac-4f0e-baa9-4aa00d14a2e8.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/eed266c1-fdac-4f0e-baa9-4aa00d14a2e8.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/eed266c1-fdac-4f0e-baa9-4aa00d14a2e8.mp4">10月23日.mp4</video>

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

@@ -1,22 +1,13 @@
 import { test } from '@affine-test/kit/playwright';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import {
+  addDatabase,
   clickNewPageButton,
   getBlockSuiteEditorTitle,
   waitForEditorLoad,
 } from '@affine-test/kit/utils/page-logic';
-import type { Page } from '@playwright/test';
 import { expect } from '@playwright/test';
 
-const addDatabase = async (page: Page) => {
-  await page.keyboard.press('/', { delay: 500 });
-  await page.keyboard.press('d', { delay: 500 });
-  await page.keyboard.press('a', { delay: 500 });
-  await page.keyboard.press('t', { delay: 500 });
-  await page.keyboard.press('a', { delay: 500 });
-  await page.getByTestId('Table View').click();
-};
-
 test('database is useable', async ({ page }) => {
   test.slow();
   await openHomePage(page);

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

@@ -5,7 +5,10 @@ import {
   openJournalsPage,
 } from '@affine-test/kit/utils/load-page';
 import {
+  addDatabase,
+  addDatabaseRow,
   clickNewPageButton,
+  createLinkedPage,
   dragTo,
   waitForEditorLoad,
   waitForEmptyEditor,
@@ -118,11 +121,13 @@ test('property table reordering', async ({ page }) => {
     'bottom'
   );
 
-  // new order should be Doc mode, (Tags), Number, Date, Checkbox, Text
+  // new order should be Doc mode, (Tags), Created at, Updated at, Number, Date, Checkbox, Text
   for (const [index, property] of [
     'Tags',
     'Doc mode',
     'Journal',
+    'Created at',
+    'Updated at',
     'Number',
     'Date',
     'Checkbox',
@@ -163,6 +168,8 @@ test('page info show more will show all properties', async ({ page }) => {
     'Tags',
     'Doc mode',
     'Journal',
+    'Created at',
+    'Updated at',
     'Text',
     'Number',
     'Date',
@@ -261,3 +268,89 @@ test('delete property via property popup', async ({ page }) => {
     page.locator('[data-testid="http://localhost:8080/"]:has-text("Text")')
   ).not.toBeVisible();
 });
+
+test('workspace properties can be collapsed', async ({ page }) => {
+  await expect(page.getByTestId('doc-property-row').first()).toBeVisible();
+  await page.getByRole('button', { name: 'Workspace properties' }).click();
+  await expect(page.getByTestId('doc-property-row').first()).not.toBeVisible();
+  await page.getByRole('button', { name: 'Workspace properties' }).click();
+  await expect(page.getByTestId('doc-property-row').first()).toBeVisible();
+});
+
+// todo: add more tests for database backlink info for different cell types
+test('can show database backlink info', async ({ page }) => {
+  const pageTitle = 'some page title';
+  await clickNewPageButton(page, pageTitle);
+  await page.keyboard.press('Enter');
+
+  const databaseTitle = 'some database title';
+  await addDatabase(page, databaseTitle);
+
+  await expect(page.locator('affine-database-title')).toContainText(
+    databaseTitle
+  );
+
+  await expect(
+    page.locator(`affine-database-title:has-text("${databaseTitle}")`)
+  ).toBeVisible();
+
+  await addDatabaseRow(page, databaseTitle);
+
+  // the new row's title cell should have been focused at the point of adding the row
+  await createLinkedPage(page, 'linked page');
+
+  // change status label
+  await page.keyboard.press('Escape');
+  await page.keyboard.press('ArrowRight');
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('Done');
+  await page
+    .locator('affine-multi-tag-select .select-option:has-text("Done")')
+    .click();
+
+  // go back to title cell
+  await page.keyboard.press('ArrowLeft');
+  await page.keyboard.press('Enter');
+
+  // goto the linked page
+  await page.locator('.affine-reference-title:has-text("linked page")').click();
+
+  // ensure the page properties are visible
+  await ensurePagePropertiesVisible(page);
+
+  // database backlink property should be rendered, but collapsed
+  const linkedDatabaseSection = page
+    .getByTestId('property-collapsible-section')
+    .filter({
+      hasText: 'some database title',
+    });
+  await expect(linkedDatabaseSection).toBeVisible();
+
+  await expect(
+    linkedDatabaseSection.getByTestId('property-collapsible-section-content')
+  ).not.toBeVisible();
+
+  await expect(
+    linkedDatabaseSection.locator(
+      `.affine-reference-title:has-text("${pageTitle}")`
+    )
+  ).toBeVisible();
+
+  // expand the linked database section
+  await linkedDatabaseSection
+    .getByTestId('property-collapsible-section-trigger')
+    .click();
+
+  await expect(
+    linkedDatabaseSection.getByTestId('property-collapsible-section-content')
+  ).toBeVisible();
+
+  await expect(
+    linkedDatabaseSection
+      .getByTestId('database-backlink-cell')
+      .getByTestId('inline-tags-list')
+      .filter({
+        hasText: 'Done',
+      })
+  ).toBeVisible();
+});

tests/kit/utils/page-logic.ts

@@ -134,3 +134,27 @@ export const focusInlineEditor = async (page: Page) => {
     .locator('.inline-editor')
     .focus();
 };
+
+export const addDatabase = async (page: Page, title?: string) => {
+  await page.keyboard.press('/');
+  await expect(page.locator('affine-slash-menu .slash-menu')).toBeVisible();
+  await page.keyboard.type('database');
+  await page.getByTestId('Table View').click();
+
+  if (title) {
+    await page.locator('affine-database-title').click();
+    await page
+      .locator('affine-database-title rich-text [contenteditable]')
+      .fill(title);
+    await page
+      .locator('affine-database-title rich-text [contenteditable]')
+      .blur();
+  }
+};
+
+export const addDatabaseRow = async (page: Page, databaseTitle: string) => {
+  const db = page.locator(`affine-database-table`, {
+    has: page.locator(`affine-database-title:has-text("${databaseTitle}")`),
+  });
+  await db.locator('.data-view-table-group-add-row-button').click();
+};