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: ( + } + /> + ), }, ];