Add how-to link on the custom fields tab

This commit is contained in:
Fernando Chavez 2022-07-21 10:12:22 -04:00
parent 0dbfae2a29
commit d2d879e385
3 changed files with 17 additions and 1 deletions

View File

@ -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>
);

View File

@ -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();
});
});

View File

@ -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)",