yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-18 19:22:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add how-to link on the custom fields tab

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/core/content-type-builder/admin/src/components/AttributeOptions/CustomFieldsList/index.js
View File

@ -4,11 +4,18 @@ import { Box } from '@strapi/design-system/Box';
import { Grid, GridItem } from '@strapi/design-system/Grid'; import { Grid, GridItem } from '@strapi/design-system/Grid';
import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable'; import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
import { Stack } from '@strapi/design-system/Stack'; import { Stack } from '@strapi/design-system/Stack';
import { Link } from '@strapi/design-system/Link';
import { useIntl } from 'react-intl';
import EmptyAttributes from '../EmptyAttributes'; import EmptyAttributes from '../EmptyAttributes';
import CustomFieldOption from '../CustomFieldOption'; import CustomFieldOption from '../CustomFieldOption';
import getPadding from '../utils/getPadding'; 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 CustomFieldsList = () => {
const { formatMessage } = useIntl();
const customFields = useCustomFields(); const customFields = useCustomFields();
const registeredCustomFields = Object.entries(customFields.getAll()); const registeredCustomFields = Object.entries(customFields.getAll());
@ -21,7 +28,7 @@ const CustomFieldsList = () => {
return ( return (
<KeyboardNavigable tagName="button"> <KeyboardNavigable tagName="button">
<Stack spacing={8}> <Stack spacing={3}>
<Grid gap={0}> <Grid gap={0}>
{sortedCustomFields.map(([uid, customField], index) => { {sortedCustomFields.map(([uid, customField], index) => {
const { paddingLeft, paddingRight } = getPadding(index); const { paddingLeft, paddingRight } = getPadding(index);
@ -40,6 +47,12 @@ const CustomFieldsList = () => {
); );
})} })}
</Grid> </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> </Stack>
</KeyboardNavigable> </KeyboardNavigable>
); );

2
packages/core/content-type-builder/admin/src/components/AttributeOptions/tests/index.test.js
View File

@ -127,8 +127,10 @@ describe('<AttributeOptions />', () => {
const customTabSelected = screen.getByRole('tab', { selected: true }); const customTabSelected = screen.getByRole('tab', { selected: true });
const customTabText = getByText(customTabSelected, 'Custom'); const customTabText = getByText(customTabSelected, 'Custom');
const customFieldText = screen.getByText('Color'); const customFieldText = screen.getByText('Color');
const howToAddLink = screen.getByRole('link', { name: 'How to add custom fields' });
expect(customTabText).not.toBe(null); expect(customTabText).not.toBe(null);
expect(customFieldText).toBeVisible(); expect(customFieldText).toBeVisible();
expect(howToAddLink).toBeVisible();
}); });
}); });

1
packages/core/content-type-builder/admin/src/translations/en.json
View File

@ -159,6 +159,7 @@
"modalForm.sub-header.chooseAttribute.component": "Select a field for your component", "modalForm.sub-header.chooseAttribute.component": "Select a field for your component",
"modalForm.sub-header.chooseAttribute.singleType": "Select a field for your single type", "modalForm.sub-header.chooseAttribute.singleType": "Select a field for your single type",
"modalForm.tabs.custom": "Custom", "modalForm.tabs.custom": "Custom",
"modalForm.tabs.custom.howToLink": "How to add custom fields",
"modalForm.tabs.default": "Default", "modalForm.tabs.default": "Default",
"modalForm.tabs.label": "Default and Custom types tabs", "modalForm.tabs.label": "Default and Custom types tabs",
"modelPage.attribute.relation-polymorphic": "Relation (polymorphic)", "modelPage.attribute.relation-polymorphic": "Relation (polymorphic)",