mirror of
https://github.com/strapi/strapi.git
synced 2025-11-03 03:17:11 +00:00
Add how-to link on the custom fields tab
This commit is contained in:
parent
0dbfae2a29
commit
d2d879e385
@ -4,11 +4,18 @@ import { Box } from '@strapi/design-system/Box';
|
||||
import { Grid, GridItem } from '@strapi/design-system/Grid';
|
||||
import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
|
||||
import { Stack } from '@strapi/design-system/Stack';
|
||||
import { Link } from '@strapi/design-system/Link';
|
||||
import { useIntl } from 'react-intl';
|
||||
import EmptyAttributes from '../EmptyAttributes';
|
||||
import CustomFieldOption from '../CustomFieldOption';
|
||||
import getPadding from '../utils/getPadding';
|
||||
import { getTrad } from '../../../utils';
|
||||
|
||||
const HOW_TO_CUSTOM_FIELDS_DOCS_LINK =
|
||||
'https://docs.strapi.io/developer-docs/latest/getting-started/introduction.html';
|
||||
|
||||
const CustomFieldsList = () => {
|
||||
const { formatMessage } = useIntl();
|
||||
const customFields = useCustomFields();
|
||||
const registeredCustomFields = Object.entries(customFields.getAll());
|
||||
|
||||
@ -21,7 +28,7 @@ const CustomFieldsList = () => {
|
||||
|
||||
return (
|
||||
<KeyboardNavigable tagName="button">
|
||||
<Stack spacing={8}>
|
||||
<Stack spacing={3}>
|
||||
<Grid gap={0}>
|
||||
{sortedCustomFields.map(([uid, customField], index) => {
|
||||
const { paddingLeft, paddingRight } = getPadding(index);
|
||||
@ -40,6 +47,12 @@ const CustomFieldsList = () => {
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
<Link href={HOW_TO_CUSTOM_FIELDS_DOCS_LINK} isExternal>
|
||||
{formatMessage({
|
||||
id: getTrad('modalForm.tabs.custom.howToLink'),
|
||||
defaultMessage: 'How to add custom fields',
|
||||
})}
|
||||
</Link>
|
||||
</Stack>
|
||||
</KeyboardNavigable>
|
||||
);
|
||||
|
||||
@ -127,8 +127,10 @@ describe('<AttributeOptions />', () => {
|
||||
const customTabSelected = screen.getByRole('tab', { selected: true });
|
||||
const customTabText = getByText(customTabSelected, 'Custom');
|
||||
const customFieldText = screen.getByText('Color');
|
||||
const howToAddLink = screen.getByRole('link', { name: 'How to add custom fields' });
|
||||
|
||||
expect(customTabText).not.toBe(null);
|
||||
expect(customFieldText).toBeVisible();
|
||||
expect(howToAddLink).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
@ -159,6 +159,7 @@
|
||||
"modalForm.sub-header.chooseAttribute.component": "Select a field for your component",
|
||||
"modalForm.sub-header.chooseAttribute.singleType": "Select a field for your single type",
|
||||
"modalForm.tabs.custom": "Custom",
|
||||
"modalForm.tabs.custom.howToLink": "How to add custom fields",
|
||||
"modalForm.tabs.default": "Default",
|
||||
"modalForm.tabs.label": "Default and Custom types tabs",
|
||||
"modelPage.attribute.relation-polymorphic": "Relation (polymorphic)",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user