refactor(core): doc property (#8465)

doc property upgraded to use orm.

The visibility of the property are simplified to three types: `always show`, `always hide`, `hide when empty`, and the default is `always show`.

![CleanShot 2024-10-14 at 15 34 52](https://github.com/user-attachments/assets/748b8b80-061f-4d6a-8579-52e59df717c2)

Added a sidebar view to manage properties
![CleanShot 2024-10-14 at 15 35 58](https://github.com/user-attachments/assets/bffa9b1a-a1a5-4708-b2e8-4963120f3af9)

new property ui in workspace settings
![CleanShot 2024-10-14 at 15 36 44](https://github.com/user-attachments/assets/572d8dcc-9b3d-462a-9bcc-5f5fa8e622da)

Property lists can be collapsed
![CleanShot 2024-10-14 at 15 37 59](https://github.com/user-attachments/assets/2b20be1a-8141-478a-8fe7-405aff6d04fd)
This commit is contained in:
EYHN
2024-10-15 10:17:11 +00:00
parent 13b24eb823
commit 24e0c5797c
88 changed files with 3151 additions and 3617 deletions
+10 -18
View File
@@ -44,8 +44,6 @@ test('New a page and open it ,then open info modal in the title bar', async ({
const infoModal = page.getByTestId('info-modal');
await expect(infoModal).toBeVisible();
const tagRow = page.getByTestId('info-modal-tags-row');
await expect(tagRow).toBeVisible();
const title = page.getByTestId('info-modal-title');
await expect(title).toHaveText('this is a new page');
});
@@ -58,8 +56,6 @@ test('New a page and open it ,then open info modal in the title bar more action
const infoModal = page.getByTestId('info-modal');
await expect(infoModal).toBeVisible();
const tagRow = page.getByTestId('info-modal-tags-row');
await expect(tagRow).toBeVisible();
const title = page.getByTestId('info-modal-title');
await expect(title).toHaveText('this is a new page');
});
@@ -75,8 +71,6 @@ test('New a page, then open info modal from all doc', async ({ page }) => {
const infoModal = page.getByTestId('info-modal');
await expect(infoModal).toBeVisible();
const tagRow = page.getByTestId('info-modal-tags-row');
await expect(tagRow).toBeVisible();
const title = page.getByTestId('info-modal-title');
await expect(title).toHaveText('this is a new page');
});
@@ -105,8 +99,6 @@ test('New a page and add to favourites, then open info modal from sidebar', asyn
const infoModal = page.getByTestId('info-modal');
await expect(infoModal).toBeVisible();
const tagRow = page.getByTestId('info-modal-tags-row');
await expect(tagRow).toBeVisible();
const title = page.getByTestId('info-modal-title');
await expect(title).toHaveText('this is a new page');
});
@@ -116,16 +108,16 @@ test('allow create tag', async ({ page }) => {
const infoModal = page.getByTestId('info-modal');
await expect(infoModal).toBeVisible();
await page.getByTestId('info-modal-tags-value').click();
await infoModal.getByTestId('property-tags-value').click();
await searchAndCreateTag(page, 'Test1');
await searchAndCreateTag(page, 'Test2');
await closeTagsEditor(page);
await expectTagsVisible(page, ['Test1', 'Test2']);
await expectTagsVisible(infoModal, ['Test1', 'Test2']);
await page.getByTestId('info-modal-tags-value').click();
await infoModal.getByTestId('property-tags-value').click();
await removeSelectedTag(page, 'Test1');
await closeTagsEditor(page);
await expectTagsVisible(page, ['Test2']);
await expectTagsVisible(infoModal, ['Test2']);
});
test('add custom property', async ({ page }) => {
@@ -133,10 +125,10 @@ test('add custom property', async ({ page }) => {
const infoModal = page.getByTestId('info-modal');
await expect(infoModal).toBeVisible();
await addCustomProperty(page, 'Text');
await addCustomProperty(page, 'Number');
await addCustomProperty(page, 'Date');
await addCustomProperty(page, 'Checkbox');
await addCustomProperty(page, 'Created by');
await addCustomProperty(page, 'Last edited by');
await addCustomProperty(page, infoModal, 'text');
await addCustomProperty(page, infoModal, 'number');
await addCustomProperty(page, infoModal, 'date');
await addCustomProperty(page, infoModal, 'checkbox');
await addCustomProperty(page, infoModal, 'createdBy');
await addCustomProperty(page, infoModal, 'updatedBy');
});
+53 -135
View File
@@ -81,39 +81,40 @@ test('allow create tag on journals page', async ({ page }) => {
});
test('add custom property', async ({ page }) => {
await addCustomProperty(page, 'Text');
await addCustomProperty(page, 'Number');
await addCustomProperty(page, 'Date');
await addCustomProperty(page, 'Checkbox');
await addCustomProperty(page, 'Created by');
await addCustomProperty(page, 'Last edited by');
await addCustomProperty(page, page, 'text');
await addCustomProperty(page, page, 'number');
await addCustomProperty(page, page, 'date');
await addCustomProperty(page, page, 'checkbox');
await addCustomProperty(page, page, 'createdBy');
await addCustomProperty(page, page, 'updatedBy');
});
test('add custom property & edit', async ({ page }) => {
await addCustomProperty(page, 'Checkbox');
await addCustomProperty(page, page, 'checkbox');
await expect(
getPropertyValueLocator(page, 'Checkbox').locator('input')
getPropertyValueLocator(page, 'checkbox').locator('input')
).not.toBeChecked();
await clickPropertyValue(page, 'Checkbox');
await clickPropertyValue(page, 'checkbox');
await expect(
getPropertyValueLocator(page, 'Checkbox').locator('input')
getPropertyValueLocator(page, 'checkbox').locator('input')
).toBeChecked();
});
test('property table reordering', async ({ page }) => {
await addCustomProperty(page, 'Text');
await addCustomProperty(page, 'Number');
await addCustomProperty(page, 'Date');
await addCustomProperty(page, 'Checkbox');
await addCustomProperty(page, 'Created by');
await addCustomProperty(page, 'Last edited by');
await addCustomProperty(page, page, 'text');
await addCustomProperty(page, page, 'number');
await addCustomProperty(page, page, 'date');
await addCustomProperty(page, page, 'checkbox');
await addCustomProperty(page, page, 'createdBy');
await addCustomProperty(page, page, 'updatedBy');
await dragTo(
page,
page.locator('[data-testid="page-property-row-name"]:has-text("Text")'),
page.locator('[data-testid="doc-property-name"]:has-text("Text")'),
page.locator(
'[data-testid="page-property-row-name"]:has-text("Checkbox") + div'
)
'[data-testid="doc-property-name"]:has-text("Checkbox") + div'
),
'bottom'
);
// new order should be (Tags), Number, Date, Checkbox, Text
@@ -128,9 +129,9 @@ test('property table reordering', async ({ page }) => {
].entries()) {
await expect(
page
.getByTestId('page-property-row')
.getByTestId('doc-property-row')
.nth(index)
.getByTestId('page-property-row-name')
.getByTestId('doc-property-name')
).toHaveText(property);
}
});
@@ -143,23 +144,20 @@ test('page info show more will not should by default when there is no properties
});
test('page info show more will show all properties', async ({ page }) => {
await addCustomProperty(page, 'Text');
await addCustomProperty(page, 'Number');
await addCustomProperty(page, 'Date');
await addCustomProperty(page, 'Checkbox');
await addCustomProperty(page, 'Created by');
await addCustomProperty(page, 'Last edited by');
await addCustomProperty(page, page, 'text');
await addCustomProperty(page, page, 'number');
await addCustomProperty(page, page, 'date');
await addCustomProperty(page, page, 'checkbox');
await addCustomProperty(page, page, 'createdBy');
await addCustomProperty(page, page, 'updatedBy');
await expect(page.getByTestId('page-info-show-more')).toBeVisible();
await page.click('[data-testid="page-info-show-more"]');
await expect(
page.getByRole('heading', {
name: 'customize properties',
})
).toBeVisible();
await changePropertyVisibility(page, 'Text', 'always-hide');
await expect(page.getByTestId('property-collapsible-button')).toBeVisible();
await page.click('[data-testid="property-collapsible-button"]');
// new order should be (Tags), Number, Date, Checkbox, Text
for (const [index, property] of [
'Tags',
'Text',
'Number',
'Date',
@@ -169,51 +167,51 @@ test('page info show more will show all properties', async ({ page }) => {
].entries()) {
await expect(
page
.getByTestId('page-properties-settings-menu-item')
.getByTestId('doc-property-row')
.nth(index)
.getByTestId('page-property-setting-row-name')
.getByTestId('doc-property-name')
).toHaveText(property);
}
});
test('change page properties visibility', async ({ page }) => {
await addCustomProperty(page, 'Text');
await addCustomProperty(page, 'Number');
await addCustomProperty(page, 'Date');
await addCustomProperty(page, 'Checkbox');
await addCustomProperty(page, page, 'text');
await addCustomProperty(page, page, 'number');
await addCustomProperty(page, page, 'date');
await addCustomProperty(page, page, 'checkbox');
// add some number to number property
await clickPropertyValue(page, 'Number');
await page.locator('input[type=number]').fill('123');
await changePropertyVisibility(page, 'Text', 'Hide in view');
await changePropertyVisibility(page, 'Number', 'Hide in view when empty');
await changePropertyVisibility(page, 'Text', 'always-hide');
await changePropertyVisibility(page, 'Number', 'hide-when-empty');
// text property should not be visible
await expect(
page.locator('[data-testid="page-property-row-name"]:has-text("Text")')
page.locator('[data-testid="doc-property-name"]:has-text("Text")')
).not.toBeVisible();
// number property should be visible
await expect(
page.locator('[data-testid="page-property-row-name"]:has-text("Number")')
page.locator('[data-testid="doc-property-name"]:has-text("Number")')
).toBeVisible();
});
test('check if added property is also in workspace settings', async ({
page,
}) => {
await addCustomProperty(page, 'Text');
await addCustomProperty(page, page, 'text');
await openWorkspaceProperties(page);
await expect(
page.locator('[data-testid=custom-property-row]:has-text("Text")')
page.locator('[data-testid=doc-property-manager-item]:has-text("Text")')
).toBeVisible();
});
test('edit property name', async ({ page }) => {
await addCustomProperty(page, 'Text');
await addCustomProperty(page, page, 'text');
await page
.locator('[data-testid="page-property-row-name"]:has-text("Text")')
.locator('[data-testid="doc-property-name"]:has-text("Text")')
.click();
await expect(page.locator('[data-radix-menu-content]')).toBeVisible();
await expect(page.locator('[data-radix-menu-content] input')).toHaveValue(
@@ -229,26 +227,24 @@ test('edit property name', async ({ page }) => {
// check if the property name is also updated in workspace settings
await openWorkspaceProperties(page);
await expect(
page.locator('[data-testid=custom-property-row]:has-text("New Text")')
page.locator('[data-testid=doc-property-manager-item]:has-text("New Text")')
).toBeVisible();
});
test('delete property via property popup', async ({ page }) => {
await addCustomProperty(page, 'Text');
await addCustomProperty(page, page, 'text');
await page
.locator('[data-testid="page-property-row-name"]:has-text("Text")')
.locator('[data-testid="doc-property-name"]:has-text("Text")')
.click();
await expect(page.locator('[data-radix-menu-content]')).toBeVisible();
await page
.locator('[data-radix-menu-content]')
.getByRole('menuitem', {
name: 'Remove property',
name: 'Delete property',
})
.click();
// confirm delete dialog should show
await expect(page.getByRole('dialog')).toContainText(
`The "Text" property will be remove from 1 doc(s). This action cannot be undone.`
);
await expect(page.getByRole('dialog')).toBeVisible();
await page
.getByRole('button', {
name: 'Confirm',
@@ -256,84 +252,6 @@ test('delete property via property popup', async ({ page }) => {
.click();
// check if the property is removed
await expect(
page.locator('[data-testid="page-property-row-name"]:has-text("Text")')
).not.toBeVisible();
});
test('create a required property', async ({ page }) => {
await openWorkspaceProperties(page);
await addCustomProperty(page, 'Text', true);
await page
.locator('[data-testid="custom-property-row"]:has-text("Text")')
.getByRole('button')
.click();
await page
.getByRole('menuitem', {
name: 'Set as required property',
})
.click();
await expect(
page.locator('[data-testid="custom-property-row"]:has-text("Text")')
).toContainText('Required');
// close workspace settings
await page.keyboard.press('Escape');
// check if the property is also required in page properties
await expect(
page.locator('[data-testid="page-property-row-name"]:has-text("Text")')
).toBeVisible();
// check if the required property is also listed in the show more menu
await page.click('[data-testid="page-info-show-more"]');
await expect(
page.locator(
'[data-testid="page-properties-settings-menu-item"]:has-text("Text")'
)
).toContainText('Required');
});
test('delete a required property', async ({ page }) => {
await openWorkspaceProperties(page);
await addCustomProperty(page, 'Text', true);
await page
.locator('[data-testid="custom-property-row"]:has-text("Text")')
.getByRole('button')
.click();
await page
.getByRole('menuitem', {
name: 'Set as required property',
})
.click();
await page
.locator('[data-testid="custom-property-row"]:has-text("Text")')
.getByRole('button')
.click();
await page
.getByRole('menuitem', {
name: 'Delete property',
})
.click();
await page
.getByRole('button', {
name: 'Confirm',
})
.click();
// close workspace settings
await page.keyboard.press('Escape');
await waitForEditorLoad(page);
// check if the property is removed from page properties
await expect(
page.locator('[data-testid="page-property-row-name"]:has-text("Text")')
page.locator('[data-testid="http://localhost:8080/"]:has-text("Text")')
).not.toBeVisible();
});
+1 -3
View File
@@ -127,9 +127,7 @@ export const createPageWithTag = async (
await getBlockSuiteEditorTitle(page).click();
await getBlockSuiteEditorTitle(page).fill('test page');
await page.getByTestId('page-info-collapse').click();
await page
.locator('[data-testid="page-property-row"][data-property="tags"]')
.click();
await page.locator('[data-testid="property-tags-value"]').click();
for (const name of options.tags) {
await createTag(page, name);
}
+24 -46
View File
@@ -1,9 +1,9 @@
import type { Page } from '@playwright/test';
import type { Locator, Page } from '@playwright/test';
import { expect } from '@playwright/test';
export const getPropertyValueLocator = (page: Page, property: string) => {
return page.locator(
`[data-testid="page-property-row-name"]:has-text("${property}") + *`
`[data-testid="doc-property-name"]:has-text("${property}") + *`
);
};
@@ -66,9 +66,12 @@ export const searchAndCreateTag = async (page: Page, name: string) => {
.click();
};
export const expectTagsVisible = async (page: Page, tags: string[]) => {
const tagListPanel = page
.getByTestId('page-property-row')
export const expectTagsVisible = async (
root: Locator | Page,
tags: string[]
) => {
const tagListPanel = root
.getByTestId('property-tags-value')
.getByTestId('inline-tags-list');
expect(await tagListPanel.locator('[data-tag-value]').count()).toBe(
@@ -82,8 +85,8 @@ export const expectTagsVisible = async (page: Page, tags: string[]) => {
}
};
export const clickAddPropertyButton = async (page: Page) => {
await page
export const clickAddPropertyButton = async (root: Locator | Page) => {
await root
.getByRole('button', {
name: 'Add property',
})
@@ -92,40 +95,17 @@ export const clickAddPropertyButton = async (page: Page) => {
export const addCustomProperty = async (
page: Page,
type: string,
inSettings?: boolean
root: Locator | Page,
type: string
) => {
await clickAddPropertyButton(page);
if (!inSettings) {
await expect(
page.getByRole('heading', {
name: 'Properties',
})
).toBeVisible();
await page
.getByRole('menuitem', {
name: 'Create property',
})
.click();
}
await expect(
page.getByRole('heading', {
name: 'Type',
})
).toBeVisible();
await clickAddPropertyButton(root);
await page
.getByRole('menuitem', {
name: type,
})
.locator(
`[data-testid="${'create-property-menu-item'}"][data-property-type="${type}"]`
)
.click();
if (!inSettings) {
await expect(
page
.getByRole('menuitem', {
name: type,
})
.locator('.selected')
).toBeVisible();
if (await page.getByTestId('edit-property-menu-item').isVisible()) {
// is edit property menu opened, close it
await page.keyboard.press('Escape');
}
await page.waitForTimeout(500);
@@ -184,12 +164,10 @@ export const changePropertyVisibility = async (
name: string,
option: string
) => {
await expect(page.getByTestId('page-info-show-more')).toBeVisible();
await page.click('[data-testid="page-info-show-more"]');
await expect(
page.getByRole('heading', {
name: 'customize properties',
})
).toBeVisible();
await selectVisibilitySelector(page, name, option);
await page
.locator(`[data-testid="doc-property-name"]:has-text("${name}")`)
.click();
await page.locator(`[data-property-visibility="${option}"]`).click();
await page.keyboard.press('Escape');
await page.waitForTimeout(500);
};