From d2d879e38558c275c93d4fe1e52f193a8b56add0 Mon Sep 17 00:00:00 2001
From: Fernando Chavez <fc9chavez@gmail.com>
Date: Thu, 21 Jul 2022 10:12:22 -0400
Subject: [PATCH] Add how-to link on the custom fields tab

---
 .../AttributeOptions/CustomFieldsList/index.js    | 15 ++++++++++++++-
 .../AttributeOptions/tests/index.test.js          |  2 ++
 .../admin/src/translations/en.json                |  1 +
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/core/content-type-builder/admin/src/components/AttributeOptions/CustomFieldsList/index.js b/packages/core/content-type-builder/admin/src/components/AttributeOptions/CustomFieldsList/index.js
index 34b457f738..39e728e0ce 100644
--- a/packages/core/content-type-builder/admin/src/components/AttributeOptions/CustomFieldsList/index.js
+++ b/packages/core/content-type-builder/admin/src/components/AttributeOptions/CustomFieldsList/index.js
@@ -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>
   );
diff --git a/packages/core/content-type-builder/admin/src/components/AttributeOptions/tests/index.test.js b/packages/core/content-type-builder/admin/src/components/AttributeOptions/tests/index.test.js
index 6ee8383ff2..f376410d11 100644
--- a/packages/core/content-type-builder/admin/src/components/AttributeOptions/tests/index.test.js
+++ b/packages/core/content-type-builder/admin/src/components/AttributeOptions/tests/index.test.js
@@ -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();
   });
 });
diff --git a/packages/core/content-type-builder/admin/src/translations/en.json b/packages/core/content-type-builder/admin/src/translations/en.json
index 8480f806ed..0d996fe63f 100644
--- a/packages/core/content-type-builder/admin/src/translations/en.json
+++ b/packages/core/content-type-builder/admin/src/translations/en.json
@@ -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)",