Extract DisplayedType component

packages/core/content-type-builder/admin/src/components/ListRow/DisplayedType.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Typography } from '@strapi/design-system/Typography';
+import getTrad from '../../utils/getTrad';
+
+const DisplayedType = ({ readableType, customField, repeatable }) => {
+  const { formatMessage } = useIntl();
+
+  if (customField) {
+    return (
+      <Typography>
+        {formatMessage({
+          id: getTrad('attribute.customField'),
+          defaultMessage: 'Custom field',
+        })}
+      </Typography>
+    );
+  }
+
+  return (
+    <Typography>
+      {formatMessage({
+        id: getTrad(`attribute.${readableType}`),
+        defaultMessage: readableType,
+      })}
+      &nbsp;
+      {repeatable &&
+        formatMessage({
+          id: getTrad('component.repeatable'),
+          defaultMessage: '(repeatable)',
+        })}
+    </Typography>
+  );
+};
+
+DisplayedType.defaultProps = {
+  customField: null,
+  repeatable: false,
+};
+
+DisplayedType.propTypes = {
+  readableType: PropTypes.string.isRequired,
+  customField: PropTypes.bool,
+  repeatable: PropTypes.bool,
+};
+
+export default DisplayedType;

packages/core/content-type-builder/admin/src/components/ListRow/index.js

@@ -17,6 +17,7 @@ import Curve from '../../icons/Curve';
 import UpperFist from '../UpperFirst';
 import BoxWrapper from './BoxWrapper';
 import AttributeIcon from '../AttributeIcon';
+import DisplayedType from './DisplayedType';
 
 function ListRow({
   configurable,
@@ -39,7 +40,7 @@ function ListRow({
   const isMorph = type === 'relation' && relation.includes('morph');
   const ico = ['integer', 'biginteger', 'float', 'decimal'].includes(type) ? 'number' : type;
 
-  let readableType = customField || type;
+  let readableType = type;
 
   if (['integer', 'biginteger', 'float', 'decimal'].includes(type)) {
     readableType = 'number';
@@ -119,18 +120,11 @@ function ListRow({
             </span>
           </Typography>
         ) : (
-          <Typography>
+          <DisplayedType
-            {formatMessage({
+            customField={customField}
-              id: getTrad(`attribute.${readableType}`),
+            readableType={readableType}
-              defaultMessage: customField ? 'Custom field' : type,
+            repeatable={repeatable}
-            })}
+          />
-            &nbsp;
-            {repeatable &&
-              formatMessage({
-                id: getTrad('component.repeatable'),
-                defaultMessage: '(repeatable)',
-              })}
-          </Typography>
         )}
       </td>
       <td>