diff --git a/packages/core/admin/admin/src/content-manager/components/Inputs/GenericInput.js b/packages/core/admin/admin/src/content-manager/components/Inputs/GenericInput.js
index 3c69cc99a5..30cf68ab68 100644
--- a/packages/core/admin/admin/src/content-manager/components/Inputs/GenericInput.js
+++ b/packages/core/admin/admin/src/content-manager/components/Inputs/GenericInput.js
@@ -15,6 +15,7 @@ const Input = ({
description,
disabled,
intlLabel,
+ labelAction,
error,
name,
onChange,
@@ -34,6 +35,7 @@ const Input = ({
description={description}
disabled={disabled}
intlLabel={intlLabel}
+ labelAction={labelAction}
error={error}
name={name}
onChange={onChange}
@@ -63,6 +65,7 @@ const Input = ({
disabled={disabled}
hint={hint}
label={label}
+ labelAction={labelAction}
name={name}
offLabel={formatMessage({
id: 'app.components.ToggleCheckbox.off-label',
@@ -93,6 +96,7 @@ const Input = ({
disabled={disabled}
error={errorMessage}
label={label}
+ labelAction={labelAction}
id={name}
hint={hint}
name={name}
@@ -109,6 +113,7 @@ Input.defaultProps = {
description: null,
disabled: false,
error: '',
+ labelAction: undefined,
placeholder: null,
value: '',
};
@@ -127,6 +132,7 @@ Input.propTypes = {
defaultMessage: PropTypes.string.isRequired,
values: PropTypes.object,
}).isRequired,
+ labelAction: PropTypes.element,
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
placeholder: PropTypes.shape({
diff --git a/packages/core/admin/admin/src/content-manager/components/Inputs/index.js b/packages/core/admin/admin/src/content-manager/components/Inputs/index.js
index 98db15dc91..ef595bba38 100644
--- a/packages/core/admin/admin/src/content-manager/components/Inputs/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/Inputs/index.js
@@ -4,7 +4,6 @@ import get from 'lodash/get';
import omit from 'lodash/omit';
import take from 'lodash/take';
import isEqual from 'react-fast-compare';
-import { useIntl } from 'react-intl';
// import { Inputs as InputsIndex } from '@buffetjs/custom';
// import { NotAllowedInput, useLibrary } from '@strapi/helper-plugin';
import { useContentTypeLayout } from '../../hooks';
@@ -29,7 +28,7 @@ function Inputs({
formErrors,
isCreatingEntry,
keys,
- labelIcon,
+ labelAction,
metadatas,
onBlur,
onChange,
@@ -41,11 +40,6 @@ function Inputs({
// const { fields } = useLibrary();
const { contentType: currentContentTypeLayout } = useContentTypeLayout();
- const { formatMessage } = useIntl();
-
- const labelIconformatted = labelIcon
- ? { icon: labelIcon.icon, title: formatMessage(labelIcon.title) }
- : labelIcon;
const disabled = useMemo(() => !get(metadatas, 'editable', true), [metadatas]);
const type = fieldSchema.type;
@@ -183,7 +177,7 @@ function Inputs({
// return (
//
// );
@@ -196,7 +190,7 @@ function Inputs({
// {
return (
- {grid.map(({ fieldSchema, labelIcon, metadatas, name, size }) => {
- return (
-
-
-
- );
- })}
+ {grid.map(
+ ({ fieldSchema, labelAction, metadatas, name, size }) => {
+ return (
+
+
+
+ );
+ }
+ )}
);
})}
diff --git a/packages/plugins/i18n/admin/src/components/LabelAction/index.js b/packages/plugins/i18n/admin/src/components/LabelAction/index.js
new file mode 100644
index 0000000000..9418367b92
--- /dev/null
+++ b/packages/plugins/i18n/admin/src/components/LabelAction/index.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Tooltip } from '@strapi/parts/Tooltip';
+
+const LabelAction = ({ title, icon }) => {
+ const { formatMessage } = useIntl();
+
+ return (
+
+
+
+ );
+};
+
+LabelAction.propTypes = {
+ icon: PropTypes.element.isRequired,
+ title: PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ defaultMessage: PropTypes.string.isRequired,
+ }).isRequired,
+};
+
+export default LabelAction;
diff --git a/packages/plugins/i18n/admin/src/contentManagerHooks/mutateEditViewLayout.js b/packages/plugins/i18n/admin/src/contentManagerHooks/mutateEditViewLayout.js
index c29e776936..01dcba8156 100644
--- a/packages/plugins/i18n/admin/src/contentManagerHooks/mutateEditViewLayout.js
+++ b/packages/plugins/i18n/admin/src/contentManagerHooks/mutateEditViewLayout.js
@@ -1,16 +1,19 @@
import React from 'react';
import get from 'lodash/get';
-import { Globe, GlobeCrossed } from '@buffetjs/icons';
+import I18N from '@strapi/icons/I18N';
+// FIXME
+import HelpIcon from '@strapi/icons/HelpIcon';
+import LabelAction from '../components/LabelAction';
import { getTrad } from '../utils';
const enhanceRelationLayout = (layout, locale) =>
layout.map(current => {
- const labelIcon = {
+ const labelActionProps = {
title: {
id: getTrad('Field.localized'),
defaultMessage: 'This value is unique for the selected locale',
},
- icon: ,
+ icon: ,
};
let queryInfos = current.queryInfos;
@@ -22,7 +25,7 @@ const enhanceRelationLayout = (layout, locale) =>
};
}
- return { ...current, labelIcon, queryInfos };
+ return { ...current, labelAction: , queryInfos };
});
const enhanceEditLayout = layout =>
@@ -35,17 +38,17 @@ const enhanceEditLayout = layout =>
type === 'uid'
);
- const labelIcon = {
+ const labelActionProps = {
title: {
id: hasI18nEnabled ? getTrad('Field.localized') : getTrad('Field.not-localized'),
defaultMessage: hasI18nEnabled
? 'This value is unique for the selected locale'
: 'This value is common to all locales',
},
- icon: hasI18nEnabled ? : ,
+ icon: hasI18nEnabled ? : ,
};
- acc.push({ ...field, labelIcon });
+ acc.push({ ...field, labelAction: });
return acc;
}, []);
diff --git a/packages/plugins/i18n/admin/src/contentManagerHooks/tests/mutateEditViewLayout.test.js b/packages/plugins/i18n/admin/src/contentManagerHooks/tests/mutateEditViewLayout.test.js
index 8f89a19b7d..e45d70b8fd 100644
--- a/packages/plugins/i18n/admin/src/contentManagerHooks/tests/mutateEditViewLayout.test.js
+++ b/packages/plugins/i18n/admin/src/contentManagerHooks/tests/mutateEditViewLayout.test.js
@@ -1,5 +1,8 @@
import React from 'react';
-import { Globe, GlobeCrossed } from '@buffetjs/icons';
+import I18N from '@strapi/icons/I18N';
+// FIXME
+import HelpIcon from '@strapi/icons/HelpIcon';
+import LabelAction from '../../components/LabelAction';
import { getTrad } from '../../utils';
import mutateEditViewLayout, {
enhanceComponentsLayout,
@@ -115,10 +118,12 @@ describe('i18n | contentManagerHooks | mutateEditViewLayout', () => {
},
size: 6,
targetModelPluginOptions: {},
- labelIcon: {
- title: { id: localizedTrad, defaultMessage: localizedTradDefaultMessage },
- icon: ,
- },
+ labelAction: (
+ }
+ />
+ ),
},
],
},
@@ -352,10 +357,12 @@ describe('i18n | contentManagerHooks | mutateEditViewLayout', () => {
pluginOptions: { i18n: { localized: true } },
type: 'string',
},
- labelIcon: {
- title: { id: localizedTrad, defaultMessage: localizedTradDefaultMessage },
- icon: ,
- },
+ labelAction: (
+ }
+ />
+ ),
},
],
[
@@ -366,10 +373,12 @@ describe('i18n | contentManagerHooks | mutateEditViewLayout', () => {
pluginOptions: { i18n: { localized: true } },
type: 'string',
},
- labelIcon: {
- title: { id: localizedTrad, defaultMessage: localizedTradDefaultMessage },
- icon: ,
- },
+ labelAction: (
+ }
+ />
+ ),
},
{
name: 'slug',
@@ -377,10 +386,12 @@ describe('i18n | contentManagerHooks | mutateEditViewLayout', () => {
fieldSchema: {
type: 'uid',
},
- labelIcon: {
- title: { id: localizedTrad, defaultMessage: localizedTradDefaultMessage },
- icon: ,
- },
+ labelAction: (
+ }
+ />
+ ),
},
],
];
@@ -420,10 +431,12 @@ describe('i18n | contentManagerHooks | mutateEditViewLayout', () => {
pluginOptions: { i18n: { localized: true } },
type: 'string',
},
- labelIcon: {
- title: { id: localizedTrad, defaultMessage: localizedTradDefaultMessage },
- icon: ,
- },
+ labelAction: (
+ }
+ />
+ ),
},
],
[
@@ -434,10 +447,12 @@ describe('i18n | contentManagerHooks | mutateEditViewLayout', () => {
pluginOptions: { i18n: { localized: false } },
type: 'string',
},
- labelIcon: {
- title: { id: notLocalizedTrad, defaultMessage: notLocalizedTradDefaultMessage },
- icon: ,
- },
+ labelAction: (
+ }
+ />
+ ),
},
],
];
@@ -466,10 +481,12 @@ describe('i18n | contentManagerHooks | mutateEditViewLayout', () => {
queryInfos: {},
size: 6,
targetModelPluginOptions: {},
- labelIcon: {
- title: { id: localizedTrad, defaultMessage: localizedTradDefaultMessage },
- icon: ,
- },
+ labelAction: (
+ }
+ />
+ ),
},
];
@@ -509,10 +526,12 @@ describe('i18n | contentManagerHooks | mutateEditViewLayout', () => {
targetModelPluginOptions: {
i18n: { localized: true },
},
- labelIcon: {
- title: { id: localizedTrad, defaultMessage: localizedTradDefaultMessage },
- icon: ,
- },
+ labelAction: (
+ }
+ />
+ ),
},
];