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

View File

@ -1,3 +1,4 @@
import { Collection } from '../../../data-source/collection/Collection';
import { getCollectionTitle } from '../BlockSchemaToolbar';
describe('getCollectionTitle', () => {
@ -25,14 +26,21 @@ describe('getCollectionTitle', () => {
},
name: 'Association Field Name',
},
associationCollection: {
title: 'Association Collection Title',
name: 'Association Collection Name',
} as Collection,
compile: vi.fn((value) => `Compiled: ${value}`),
};
const result = getCollectionTitle(arg);
expect(result).toBe('Compiled: Collection Title > Compiled: Association Field Title');
expect(arg.compile).toHaveBeenCalledTimes(2);
expect(result).toBe(
'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('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.mouse.move(300, 0);
await expect(page.getByText('GeneralConfigure actionsConfigure fields')).toBeVisible();
await expect(page.getByText('GeneralConfigure fieldsConfigure actions')).toBeVisible();
await expect(page.getByLabel('block-item-Markdown.Void-general-markdown')).toBeVisible();
await expect(page.getByLabel('block-item-CardItem-general-details')).toBeVisible();
await expect(page.getByLabel('block-item-CardItem-general-form')).toBeVisible();
await expect(page.getByLabel('block-item-Markdown.Void-')).toBeVisible();
// add relationship blocks
// 下拉列表中,可选择以下区块进行创建