chore: optimize block title (#4040)

* chore: optimize block title

* chore: fix failed e2e
This commit is contained in:
Zeke Zhang 2024-04-17 16:48:31 +08:00 committed by GitHub
parent 164359171d
commit 01f1440005
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 20 additions and 9 deletions

View File

@ -1,6 +1,6 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useCollectionManager, useDataBlockProps } from '../../data-source'; import { Collection, useCollectionManager, useDataBlockProps } from '../../data-source';
import { useCollection } from '../../data-source/collection/CollectionProvider'; import { useCollection } from '../../data-source/collection/CollectionProvider';
import { useCompile } from '../../schema-component'; import { useCompile } from '../../schema-component';
import { SchemaToolbar } from '../../schema-settings/GeneralSchemaDesigner'; import { SchemaToolbar } from '../../schema-settings/GeneralSchemaDesigner';
@ -22,6 +22,7 @@ export const BlockSchemaToolbar = (props) => {
} }
const associationField = cm.getCollectionField(association); const associationField = cm.getCollectionField(association);
const associationCollection = cm.getCollection(associationField?.target);
const templateName = ['FormItem', 'ReadPrettyFormItem'].includes(template?.componentName) const templateName = ['FormItem', 'ReadPrettyFormItem'].includes(template?.componentName)
? `${template?.name} ${t('(Fields only)')}` ? `${template?.name} ${t('(Fields only)')}`
: template?.name; : template?.name;
@ -31,11 +32,12 @@ export const BlockSchemaToolbar = (props) => {
collectionTitle: currentCollectionTitle, collectionTitle: currentCollectionTitle,
collectionName: currentCollectionName, collectionName: currentCollectionName,
associationField, associationField,
associationCollection,
compile, compile,
}), }),
templateName, templateName,
].filter(Boolean); ].filter(Boolean);
}, [compile, currentCollectionTitle, currentCollectionName, associationField, templateName]); }, [currentCollectionTitle, currentCollectionName, associationField, associationCollection, compile, templateName]);
return <SchemaToolbar title={toolbarTitle} {...props} />; return <SchemaToolbar title={toolbarTitle} {...props} />;
}; };
@ -44,14 +46,15 @@ export function getCollectionTitle(arg: {
collectionTitle: string; collectionTitle: string;
collectionName: string; collectionName: string;
associationField: any; associationField: any;
associationCollection?: Collection;
compile: any; compile: any;
}) { }) {
const { collectionTitle, collectionName, associationField, compile } = arg; const { collectionTitle, collectionName, associationField, compile, associationCollection } = arg;
if (associationField) { if (associationField) {
return `${compile(collectionTitle || collectionName)} > ${compile( return `${compile(collectionTitle || collectionName)} > ${compile(
associationField.uiSchema?.title || associationField.name, associationField.uiSchema?.title || associationField.name,
)}`; )} (${compile(associationCollection?.title || associationCollection?.name)})`;
} }
return compile(collectionTitle || collectionName); return compile(collectionTitle || collectionName);

View File

@ -1,3 +1,4 @@
import { Collection } from '../../../data-source/collection/Collection';
import { getCollectionTitle } from '../BlockSchemaToolbar'; import { getCollectionTitle } from '../BlockSchemaToolbar';
describe('getCollectionTitle', () => { describe('getCollectionTitle', () => {
@ -25,14 +26,21 @@ describe('getCollectionTitle', () => {
}, },
name: 'Association Field Name', name: 'Association Field Name',
}, },
associationCollection: {
title: 'Association Collection Title',
name: 'Association Collection Name',
} as Collection,
compile: vi.fn((value) => `Compiled: ${value}`), compile: vi.fn((value) => `Compiled: ${value}`),
}; };
const result = getCollectionTitle(arg); const result = getCollectionTitle(arg);
expect(result).toBe('Compiled: Collection Title > Compiled: Association Field Title'); expect(result).toBe(
expect(arg.compile).toHaveBeenCalledTimes(2); 'Compiled: Collection Title > Compiled: Association Field Title (Compiled: Association Collection Title)',
);
expect(arg.compile).toHaveBeenCalledTimes(3);
expect(arg.compile).toHaveBeenCalledWith('Collection Title'); expect(arg.compile).toHaveBeenCalledWith('Collection Title');
expect(arg.compile).toHaveBeenCalledWith('Association Field Title'); expect(arg.compile).toHaveBeenCalledWith('Association Field Title');
expect(arg.compile).toHaveBeenCalledWith('Association Collection Title');
}); });
}); });

View File

@ -173,9 +173,9 @@ test.describe('where to open a popup and what can be added to it', () => {
await page.getByRole('menuitem', { name: 'Markdown' }).click(); await page.getByRole('menuitem', { name: 'Markdown' }).click();
await page.mouse.move(300, 0); await page.mouse.move(300, 0);
await expect(page.getByText('GeneralConfigure actionsConfigure fields')).toBeVisible(); await expect(page.getByLabel('block-item-CardItem-general-details')).toBeVisible();
await expect(page.getByText('GeneralConfigure fieldsConfigure actions')).toBeVisible(); await expect(page.getByLabel('block-item-CardItem-general-form')).toBeVisible();
await expect(page.getByLabel('block-item-Markdown.Void-general-markdown')).toBeVisible(); await expect(page.getByLabel('block-item-Markdown.Void-')).toBeVisible();
// add relationship blocks // add relationship blocks
// 下拉列表中,可选择以下区块进行创建 // 下拉列表中,可选择以下区块进行创建