diff --git a/examples/getstarted/api/temp/content-types/temp/schema.json b/examples/getstarted/api/temp/content-types/temp/schema.json index 6bdde37efd..575404ac92 100644 --- a/examples/getstarted/api/temp/content-types/temp/schema.json +++ b/examples/getstarted/api/temp/content-types/temp/schema.json @@ -31,7 +31,8 @@ "i18n": { "localized": true } - } + }, + "required": true }, "email": { "type": "email", @@ -48,7 +49,7 @@ "localized": true } }, - "required": true + "required": false }, "password": { "type": "password", @@ -198,7 +199,7 @@ "deux", "trois" ], - "required": true, + "required": false, "pluginOptions": { "i18n": { "localized": true 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 18d663bee9..63e312c9e1 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,13 +4,15 @@ import get from 'lodash/get'; import omit from 'lodash/omit'; import take from 'lodash/take'; import isEqual from 'react-fast-compare'; -// import { Inputs as InputsIndex } from '@buffetjs/custom'; -// import { NotAllowedInput, useLibrary } from '@strapi/helper-plugin'; +import { + NotAllowedInput, + // useLibrary +} from '@strapi/helper-plugin'; import { useContentTypeLayout } from '../../hooks'; import { getFieldName } from '../../utils'; import Wysiwyg from '../Wysiwyg'; -import GenericInput from './GenericInput'; import InputJSON from '../InputJSON'; +import GenericInput from './GenericInput'; // import SelectWrapper from '../SelectWrapper'; // import WysiwygWithErrors from '../WysiwygWithErrors'; // import InputUID from '../InputUID'; @@ -174,14 +176,15 @@ function Inputs({ } if (!shouldDisplayNotAllowedInput) { - return 'NOT ALLOWED INPUT'; - // return ( - // - // ); + return ( + + ); } if (type === 'relation') { diff --git a/packages/core/helper-plugin/lib/src/components/NotAllowedInput/index.js b/packages/core/helper-plugin/lib/src/components/NotAllowedInput/index.js new file mode 100644 index 0000000000..b1ee17139e --- /dev/null +++ b/packages/core/helper-plugin/lib/src/components/NotAllowedInput/index.js @@ -0,0 +1,83 @@ +/** + * + * NotAllowedInput + * + */ + +import React from 'react'; +import { useIntl } from 'react-intl'; +import { TextInput } from '@strapi/parts/TextInput'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import Hide from '@strapi/icons/Hide'; + +const StyledIcon = styled(Hide)` + > path { + fill: ${({ theme }) => theme.colors.neutral600}; + } +`; + +const NotAllowedInput = ({ description, intlLabel, labelAction, error, name }) => { + const { formatMessage } = useIntl(); + const label = intlLabel.id + ? formatMessage( + { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage }, + { ...intlLabel.values } + ) + : name; + + const hint = description + ? formatMessage( + { id: description.id, defaultMessage: description.defaultMessage }, + { ...description.values } + ) + : ''; + + const placeholder = formatMessage({ + id: 'components.NotAllowedInput.text', + defaultMessage: 'No permissions to see this field', + }); + + const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : ''; + + return ( + {}} + placeholder={placeholder} + startAction={} + type="text" + value="" + /> + ); +}; + +NotAllowedInput.defaultProps = { + description: null, + error: '', + labelAction: undefined, +}; + +NotAllowedInput.propTypes = { + description: PropTypes.shape({ + id: PropTypes.string.isRequired, + defaultMessage: PropTypes.string.isRequired, + values: PropTypes.object, + }), + error: PropTypes.string, + intlLabel: PropTypes.shape({ + id: PropTypes.string.isRequired, + defaultMessage: PropTypes.string.isRequired, + values: PropTypes.object, + }).isRequired, + labelAction: PropTypes.element, + name: PropTypes.string.isRequired, +}; + +export default NotAllowedInput; diff --git a/packages/core/helper-plugin/lib/src/components/NotAllowedInput/tests/index.test.js b/packages/core/helper-plugin/lib/src/components/NotAllowedInput/tests/index.test.js new file mode 100644 index 0000000000..d5694fb186 --- /dev/null +++ b/packages/core/helper-plugin/lib/src/components/NotAllowedInput/tests/index.test.js @@ -0,0 +1,201 @@ +/** + * + * Tests for NotAllowedInput + * + */ + +import React from 'react'; +import { render } from '@testing-library/react'; +import { ThemeProvider, lightTheme } from '@strapi/parts'; +import { IntlProvider } from 'react-intl'; +import NotAllowedInput from '../index'; + +const messages = { + 'components.NotAllowedInput.text': 'No permissions to see this field', +}; + +describe('', () => { + it('renders and matches the snapshot', () => { + const { + container: { firstChild }, + } = render( + + + + + + ); + + expect(firstChild).toMatchInlineSnapshot(` + .c3 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; + } + + .c6 { + padding-right: 8px; + padding-left: 12px; + } + + .c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c8 { + border: none; + border-radius: 4px; + padding-left: 0; + padding-right: 16px; + color: #32324d; + font-weight: 400; + font-size: 0.875rem; + display: block; + width: 100%; + height: 2.5rem; + } + + .c8::-webkit-input-placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c8::-moz-placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c8:-ms-input-placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c8::placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c8[aria-disabled='true'] { + background: inherit; + color: inherit; + } + + .c5 { + border: 1px solid #dcdce4; + border-radius: 4px; + background: #ffffff; + color: #666687; + background: #eaeaef; + } + + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + + .c1 > * { + margin-top: 0; + margin-bottom: 0; + } + + .c1 > * + * { + margin-top: 4px; + } + + .c0 textarea { + height: 5rem; + } + + .c7 > path { + fill: #666687; + } + +
+
+
+
+ +
+
+
+ + + +
+ +
+
+
+
+ `); + }); +}); diff --git a/packages/core/helper-plugin/lib/src/index.js b/packages/core/helper-plugin/lib/src/index.js index 376f70d53f..e65112aee6 100644 --- a/packages/core/helper-plugin/lib/src/index.js +++ b/packages/core/helper-plugin/lib/src/index.js @@ -75,7 +75,6 @@ export { default as ModalHeader } from './old/components/ModalHeader'; export { default as ModalFooter } from './old/components/FooterModal'; export { default as ModalForm } from './old/components/FormModal'; export { default as ModalSection } from './old/components/ModalSection'; -export { default as NotAllowedInput } from './old/components/NotAllowedInput'; export { default as NotFound } from './old/components/NotFound'; export { default as PageFooter } from './old/components/PageFooter'; @@ -178,6 +177,7 @@ export { default as EmptyBodyTable } from './components/EmptyBodyTable'; export { default as GenericInput } from './components/GenericInput'; export * from './components/InjectionZone'; export { default as LoadingIndicatorPage } from './components/LoadingIndicatorPage'; +export { default as NotAllowedInput } from './components/NotAllowedInput'; export { default as SettingsPageTitle } from './components/SettingsPageTitle'; export { default as Search } from './components/Search'; export { default as Status } from './components/Status'; diff --git a/packages/core/helper-plugin/lib/src/old/components/NotAllowedInput/Field.js b/packages/core/helper-plugin/lib/src/old/components/NotAllowedInput/Field.js deleted file mode 100644 index a6d642997d..0000000000 --- a/packages/core/helper-plugin/lib/src/old/components/NotAllowedInput/Field.js +++ /dev/null @@ -1,20 +0,0 @@ -import styled from 'styled-components'; - -const Field = styled.div` - height: 34px; - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - margin-top: 11px; - padding-top: 2px; - border-radius: 2px; - background-color: ${({ theme }) => theme.main.colors.mediumGrey}; - ${({ error, theme }) => - error && - ` - border: 1px solid ${theme.main.colors.lightOrange}; - `} -`; - -export default Field; diff --git a/packages/core/helper-plugin/lib/src/old/components/NotAllowedInput/index.js b/packages/core/helper-plugin/lib/src/old/components/NotAllowedInput/index.js deleted file mode 100644 index 83fa19941c..0000000000 --- a/packages/core/helper-plugin/lib/src/old/components/NotAllowedInput/index.js +++ /dev/null @@ -1,73 +0,0 @@ -import React, { memo, useMemo, useRef } from 'react'; -import PropTypes from 'prop-types'; -import { Flex, Padded, Text } from '@buffetjs/core'; -import { useIntl } from 'react-intl'; -import EyeSlashed from '../../svgs/EyeSlashed'; -import BaselineAlignment from '../BaselineAlignment'; -import LabelIconWrapper from '../LabelIconWrapper'; -import Field from './Field'; - -const NotAllowedInput = ({ label, labelIcon, description, error, spacerHeight }) => { - const { formatMessage } = useIntl(); - const formatMessageRef = useRef(formatMessage); - const text = useMemo( - () => formatMessageRef.current({ id: 'components.NotAllowedInput.text' }), - [] - ); - - return ( - - - - {label} - - {labelIcon && {labelIcon.icon}} - - - - - - - - - - {text} - - - - - {!error && description && ( - - - {description} - - - )} - {error && ( - - - {error} - - - )} - {!error && !description && } - - ); -}; - -NotAllowedInput.defaultProps = { - description: null, - label: '', - spacerHeight: '9px', -}; - -NotAllowedInput.propTypes = { - description: PropTypes.string, - label: PropTypes.string, - labelIcon: PropTypes.shape({ - icon: PropTypes.any, - title: PropTypes.string, - }), -}; - -export default memo(NotAllowedInput);