diff --git a/packages/core/admin/admin/src/content-manager/components/FieldTypeIcon/index.js b/packages/core/admin/admin/src/content-manager/components/FieldTypeIcon/index.js new file mode 100644 index 0000000000..a1c51acc03 --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/components/FieldTypeIcon/index.js @@ -0,0 +1,48 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Date from '@strapi/icons/Date'; +import Boolean from '@strapi/icons/Boolean'; +import Email from '@strapi/icons/Email'; +import Enumeration from '@strapi/icons/Enumeration'; +import Media from '@strapi/icons/Media'; +import Relation from '@strapi/icons/Relation'; +import Text from '@strapi/icons/Text'; +import Uid from '@strapi/icons/Uid'; +import Number from '@strapi/icons/Number'; +import Json from '@strapi/icons/Json'; +import Component from '@strapi/icons/Component'; +import DynamicZone from '@strapi/icons/DynamicZone'; + +const iconByTypes = { + biginteger: , + boolean: , + date: , + datetime: , + decimal: , + email: , + enum: , + enumeration: , + file: , + files: , + float: , + integer: , + media: , + number: , + relation: , + string: , + text: , + time: , + timestamp: , + json: , + uid: , + component: , + dynamiczone: , +}; + +const FieldTypeIcon = ({ type }) => iconByTypes[type]; + +FieldTypeIcon.propTypes = { + type: PropTypes.string.isRequired, +}; + +export default FieldTypeIcon; diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js index 3c84d64a5b..2d5075edb3 100644 --- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js @@ -16,15 +16,9 @@ import { useLayoutDnd } from '../../../hooks'; import FieldButton from './FieldButton'; import LinkToCTB from './LinkToCTB'; -const DisplayedFields = ({ - attributes, - editLayout, - editLayoutRemainingFields, - onRemoveField, - onAddField, -}) => { +const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField, onAddField }) => { const { formatMessage } = useIntl(); - const { setEditFieldToSelect } = useLayoutDnd(); + const { setEditFieldToSelect, attributes, modifiedData } = useLayoutDnd(); return ( @@ -56,6 +50,11 @@ const DisplayedFields = ({ {row.rowContent.map((rowItem, index) => { const attribute = get(attributes, [rowItem.name], {}); + const attributeLabel = get( + modifiedData, + ['metadatas', rowItem.name, 'edit', 'label'], + '' + ); return ( @@ -65,7 +64,7 @@ const DisplayedFields = ({ onDeleteField={() => onRemoveField(row.rowId, index)} attribute={attribute} > - {rowItem.name} + {attributeLabel || rowItem.name} ) : ( @@ -82,6 +81,7 @@ const DisplayedFields = ({ defaultMessage: 'Insert another field', })} as={Button} + data-testid="add-field" fullWidth startIcon={} endIcon={null} @@ -103,7 +103,6 @@ const DisplayedFields = ({ DisplayedFields.propTypes = { editLayout: PropTypes.array.isRequired, editLayoutRemainingFields: PropTypes.array.isRequired, - attributes: PropTypes.object.isRequired, onAddField: PropTypes.func.isRequired, onRemoveField: PropTypes.func.isRequired, }; diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/FieldButton.js b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/FieldButton.js index 1344902289..dcd9e44b5b 100644 --- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/FieldButton.js +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/FieldButton.js @@ -15,6 +15,9 @@ import getTrad from '../../../utils/getTrad'; const CustomIconButton = styled(IconButton)` background-color: transparent; + path { + fill: ${({ theme }) => theme.colors.neutral600}; + } `; const CustomDragIcon = styled(Drag)` height: ${12 / 16}rem; @@ -81,6 +84,7 @@ const FieldButton = ({ attribute, onEditField, onDeleteField, children }) => { target: children, } )} + data-testid="delete-field" onClick={onDeleteField} icon={} noBorder diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/FormModal.js b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/FormModal.js new file mode 100644 index 0000000000..d69d7747ce --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/FormModal.js @@ -0,0 +1,91 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { useIntl } from 'react-intl'; +import upperFirst from 'lodash/upperFirst'; +import { + ModalLayout, + ModalHeader, + ModalFooter, + ModalBody, +} from '@strapi/design-system/ModalLayout'; +import { ButtonText } from '@strapi/design-system/Text'; +import { Button } from '@strapi/design-system/Button'; +import { Flex } from '@strapi/design-system/Flex'; +import { Grid } from '@strapi/design-system/Grid'; +import styled from 'styled-components'; +import { getTrad } from '../../../utils'; +import { useLayoutDnd } from '../../../hooks'; +import FieldTypeIcon from '../../../components/FieldTypeIcon'; +import ModalForm from './ModalForm'; + +const HeaderContainer = styled(Flex)` + svg { + width: ${32 / 16}rem; + height: ${24 / 16}rem; + margin-right: ${({ theme }) => theme.spaces[3]}; + } +`; + +const FormModal = ({ onToggle, onChange, onSubmit, type }) => { + const { selectedField } = useLayoutDnd(); + const { formatMessage } = useIntl(); + + const getAttrType = () => { + if (type === 'timestamp') { + return 'date'; + } + + if (['decimal', 'float', 'integer', 'biginter'].includes(type)) { + return 'number'; + } + + return type; + }; + + return ( + +
+ + + + + {formatMessage( + { + id: getTrad('containers.ListSettingsView.modal-form.edit-label'), + defaultMessage: 'Edit {fieldName}', + }, + { fieldName: upperFirst(selectedField) } + )} + + + + + + + + + + {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })} + + } + endActions={ + + } + /> + +
+ ); +}; + +FormModal.propTypes = { + onSubmit: PropTypes.func.isRequired, + onToggle: PropTypes.func.isRequired, + onChange: PropTypes.func.isRequired, + type: PropTypes.string.isRequired, +}; + +export default FormModal; diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/GenericInput.js b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/GenericInput.js new file mode 100644 index 0000000000..10235301ab --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/GenericInput.js @@ -0,0 +1,68 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { TextInput } from '@strapi/design-system/TextInput'; +import { ToggleInput } from '@strapi/design-system/ToggleInput'; +import { Select, Option } from '@strapi/design-system/Select'; +import { useIntl } from 'react-intl'; + +const GenericInput = ({ type, options, onChange, value, name, ...inputProps }) => { + const { formatMessage } = useIntl(); + + switch (type) { + case 'text': { + return ; + } + case 'bool': { + return ( + { + onChange({ target: { name, value: e.target.checked } }); + }} + checked={value} + name={name} + onLabel={formatMessage({ + id: 'app.components.ToggleCheckbox.on-label', + defaultMessage: 'On', + })} + offLabel={formatMessage({ + id: 'app.components.ToggleCheckbox.off-label', + defaultMessage: 'Off', + })} + {...inputProps} + /> + ); + } + case 'select': { + return ( + + ); + } + default: + return null; + } +}; + +GenericInput.defaultProps = { + options: undefined, +}; + +GenericInput.propTypes = { + type: PropTypes.string.isRequired, + options: PropTypes.arrayOf(PropTypes.string), + onChange: PropTypes.func.isRequired, + value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired, + name: PropTypes.string.isRequired, +}; + +export default GenericInput; diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js index 65828a6093..c6445f1817 100644 --- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js @@ -1,129 +1,90 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { useMemo, useCallback } from 'react'; +import get from 'lodash/get'; +import { GridItem } from '@strapi/design-system/Grid'; +import { useSelector, shallowEqual } from 'react-redux'; import { useIntl } from 'react-intl'; -import upperFirst from 'lodash/upperFirst'; -import { - ModalLayout, - ModalHeader, - ModalFooter, - ModalBody, -} from '@strapi/design-system/ModalLayout'; -import { ButtonText } from '@strapi/design-system/Text'; -import { Button } from '@strapi/design-system/Button'; -import { Flex } from '@strapi/design-system/Flex'; -import { Grid, GridItem } from '@strapi/design-system/Grid'; -import Date from '@strapi/icons/Date'; -import Boolean from '@strapi/icons/Boolean'; -import Email from '@strapi/icons/Email'; -import Enumeration from '@strapi/icons/Enumeration'; -import Media from '@strapi/icons/Media'; -import Relation from '@strapi/icons/Relation'; -import Text from '@strapi/icons/Text'; -import Uid from '@strapi/icons/Uid'; -import Number from '@strapi/icons/Number'; -import Json from '@strapi/icons/Json'; -import Component from '@strapi/icons/Component'; -import DynamicZone from '@strapi/icons/DynamicZone'; -import styled from 'styled-components'; -import { getTrad } from '../../../utils'; import { useLayoutDnd } from '../../../hooks'; +import { createPossibleMainFieldsForModelsAndComponents, getInputProps } from '../utils'; +import { makeSelectModelAndComponentSchemas } from '../../App/selectors'; +import getTrad from '../../../utils/getTrad'; +import GenericInput from './GenericInput'; -// Create a file -const iconByTypes = { - biginteger: , - boolean: , - date: , - datetime: , - decimal: , - email: , - enum: , - enumeration: , - file: , - files: , - float: , - integer: , - media: , - number: , - relation: , - string: , - text: , - time: , - timestamp: , - json: , - uid: , - component: , - dynamiczone: , -}; - -const HeaderContainer = styled(Flex)` - svg { - width: ${32 / 16}rem; - height: ${24 / 16}rem; - margin-right: ${({ theme }) => theme.spaces[3]}; - } -`; - -const ModalForm = ({ onToggle, onSubmit, type }) => { - const { selectedField } = useLayoutDnd(); +const ModalForm = ({ onChange }) => { const { formatMessage } = useIntl(); + const { modifiedData, selectedField, attributes, fieldForm } = useLayoutDnd(); + const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []); + const { schemas } = useSelector(state => schemasSelector(state), shallowEqual); - const getAttrType = () => { - if (type === 'timestamp') { - return 'date'; + const formToDisplay = useMemo(() => { + if (!selectedField) { + return []; } - if (['decimal', 'float', 'integer', 'biginter'].includes(type)) { - return 'number'; - } + const associatedMetas = get(modifiedData, ['metadatas', selectedField, 'edit'], {}); - return type; - }; + return Object.keys(associatedMetas).filter(meta => meta !== 'visible'); + }, [selectedField, modifiedData]); - return ( - -
- - - {iconByTypes[getAttrType(type)]} - - {formatMessage( - { - id: getTrad('containers.ListSettingsView.modal-form.edit-label'), - defaultMessage: 'Edit {fieldName}', - }, - { fieldName: upperFirst(selectedField) } - )} - - - - - - - TO DO - - - - - {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })} - - } - endActions={ - - } - /> - -
+ const componentsAndModelsPossibleMainFields = useMemo(() => { + return createPossibleMainFieldsForModelsAndComponents(schemas); + }, [schemas]); + + const getSelectedItemSelectOptions = useCallback( + formType => { + if (formType !== 'relation' && formType !== 'component') { + return []; + } + + const targetKey = formType === 'component' ? 'component' : 'targetModel'; + const key = get(modifiedData, ['attributes', selectedField, targetKey], ''); + + return get(componentsAndModelsPossibleMainFields, [key], []); + }, + + [selectedField, componentsAndModelsPossibleMainFields, modifiedData] ); -}; -ModalForm.propTypes = { - onSubmit: PropTypes.func.isRequired, - onToggle: PropTypes.func.isRequired, - type: PropTypes.string.isRequired, + return formToDisplay.map(meta => { + const formType = get(attributes, [selectedField, 'type']); + + if (formType === 'dynamiczone' && !['label', 'description'].includes(meta)) { + return null; + } + + if ((formType === 'component' || formType === 'media') && meta !== 'label') { + return null; + } + + if ((formType === 'json' || formType === 'boolean') && meta === 'placeholder') { + return null; + } + + if (formType === 'richtext' && meta === 'editable') { + return null; + } + + return ( + + + + ); + }); }; export default ModalForm; diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/RelationalFields.js b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/RelationalFields.js index e71a522f2a..551c2c7de2 100644 --- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/RelationalFields.js +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/RelationalFields.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import get from 'lodash/get'; import { useIntl } from 'react-intl'; import { Button } from '@strapi/design-system/Button'; import { Box } from '@strapi/design-system/Box'; @@ -9,6 +10,7 @@ import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu'; import Plus from '@strapi/icons/Plus'; import { getTrad } from '../../../utils'; import FieldButton from './FieldButton'; +import { useLayoutDnd } from '../../../hooks'; const RelationalFields = ({ relationsLayout, @@ -17,6 +19,7 @@ const RelationalFields = ({ onAddField, }) => { const { formatMessage } = useIntl(); + const { setEditFieldToSelect, modifiedData } = useLayoutDnd(); return ( @@ -41,21 +44,30 @@ const RelationalFields = ({ - {relationsLayout.map((relationName, index) => ( - console.log(relationName)} - onDeleteField={() => onRemoveField(index)} - key={relationName} - > - {relationName} - - ))} + {relationsLayout.map((relationName, index) => { + const relationLabel = get( + modifiedData, + ['metadatas', relationName, 'edit', 'label'], + '' + ); + + return ( + setEditFieldToSelect(relationName)} + onDeleteField={() => onRemoveField(index)} + key={relationName} + > + {relationLabel || relationName} + + ); + })} } diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/index.js b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/index.js index 9fae83178f..6ea0ffe7f9 100644 --- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/index.js +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/index.js @@ -1,10 +1,15 @@ import React, { useReducer, useState } from 'react'; import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; +import { useMutation } from 'react-query'; import upperFirst from 'lodash/upperFirst'; +import pick from 'lodash/pick'; +import cloneDeep from 'lodash/cloneDeep'; import flatMap from 'lodash/flatMap'; import isEqual from 'lodash/isEqual'; import get from 'lodash/get'; +import set from 'lodash/set'; +import { useNotification, useTracking, ConfirmDialog } from '@strapi/helper-plugin'; import { useHistory } from 'react-router-dom'; import { Main } from '@strapi/design-system/Main'; import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout'; @@ -24,15 +29,20 @@ import reducer, { initialState } from './reducer'; import init from './init'; import DisplayedFields from './components/DisplayedFields'; import RelationalFields from './components/RelationalFields'; -import ModalForm from './components/ModalForm'; +import ModalForm from './components/FormModal'; import LayoutDndProvider from '../../components/LayoutDndProvider'; +import { unformatLayout } from './utils/layout'; +import putCMSettingsEV from './utils/api'; -const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug }) => { +const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, updateLayout }) => { const [reducerState, dispatch] = useReducer(reducer, initialState, () => init(initialState, mainLayout, components) ); + const { trackUsage } = useTracking(); + const toggleNotification = useNotification(); const { goBack } = useHistory(); const [isModalFormOpen, setIsModalFormOpen] = useState(false); + const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false); const { componentLayouts, initialData, modifiedData, metaToEdit, metaForm } = reducerState; const { formatMessage } = useIntl(); const modelName = get(mainLayout, ['info', isContentTypeView ? 'displayName' : 'name'], ''); @@ -85,7 +95,60 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug }) = }; const handleToggleModal = () => { - setIsModalFormOpen(prevState => !prevState); + setIsModalFormOpen(prev => !prev); + }; + + const toggleConfirmDialog = () => { + setIsConfirmDialogOpen(prev => !prev); + }; + + const handleMetaChange = ({ target: { name, value } }) => { + dispatch({ + type: 'ON_CHANGE_META', + keys: name.split('.'), + value, + }); + }; + + const handleMetaSubmit = e => { + e.preventDefault(); + dispatch({ + type: 'SUBMIT_META_FORM', + }); + handleToggleModal(); + }; + + const handleSubmit = e => { + e.preventDefault(); + toggleConfirmDialog(); + }; + + const submitMutation = useMutation( + body => { + return putCMSettingsEV(body, slug, isContentTypeView); + }, + { + onSuccess: ({ data }) => { + if (updateLayout) { + updateLayout(data.data); + } + dispatch({ + type: 'SUBMIT_SUCCEEDED', + }); + toggleConfirmDialog(); + trackUsage('didEditEditSettings'); + }, + onError: () => { + toggleNotification({ type: 'warning', message: { id: 'notification.error' } }); + }, + } + ); + const { isLoading: isSubmittingForm } = submitMutation; + + const handleConfirm = () => { + const body = pick(cloneDeep(modifiedData), ['layouts', 'metadatas', 'settings']); + set(body, 'layouts.edit', unformatLayout(body.layouts.edit)); + submitMutation.mutate(body); }; return ( @@ -115,135 +178,153 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug }) = { name: upperFirst(modelName) } )} /> - } - onClick={e => { - e.preventDefault(); - goBack(); - }} - to="/" - > - {formatMessage({ - id: 'app.components.go-back', - defaultMessage: 'Go back', - })} - - } - primaryAction={ - - } - /> - - - -

+
+ } + onClick={e => { + e.preventDefault(); + goBack(); + }} + to="/" + > {formatMessage({ - id: getTrad('containers.SettingPage.settings'), - defaultMessage: 'Settings', + id: 'app.components.go-back', + defaultMessage: 'Go back', })} -

- - - - - - - - -

- {formatMessage({ - id: getTrad('containers.SettingPage.view'), - defaultMessage: 'View', - })} -

- - - { - dispatch({ - type: 'ON_ADD_FIELD', - name: field, - }); - }} - onRemoveField={(rowId, index) => { - dispatch({ - type: 'REMOVE_FIELD', - rowIndex: rowId, - fieldIndex: index, - }); - }} - /> - - {isContentTypeView && ( - - dispatch({ type: 'ADD_RELATION', name })} - onRemoveField={index => dispatch({ type: 'REMOVE_RELATION', index })} + + } + primaryAction={ + + } + /> + + + +

+ {formatMessage({ + id: getTrad('containers.SettingPage.settings'), + defaultMessage: 'Settings', + })} +

+ + + + + + + + +

+ {formatMessage({ + id: getTrad('containers.SettingPage.view'), + defaultMessage: 'View', + })} +

+ + + { + dispatch({ + type: 'ON_ADD_FIELD', + name: field, + }); + }} + onRemoveField={(rowId, index) => { + dispatch({ + type: 'REMOVE_FIELD', + rowIndex: rowId, + fieldIndex: index, + }); + }} /> - )} - - - - + {isContentTypeView && ( + + dispatch({ type: 'ADD_RELATION', name })} + onRemoveField={index => dispatch({ type: 'REMOVE_RELATION', index })} + /> + + )} + + + + + } + isConfirmButtonLoading={isSubmittingForm} + isOpen={isConfirmDialogOpen} + onToggleDialog={toggleConfirmDialog} + onConfirm={handleConfirm} + variantRightButton="success-light" + /> + {isModalFormOpen && ( console.log(e)} + onSubmit={handleMetaSubmit} onToggle={handleToggleModal} type={get(attributes, [metaToEdit, 'type'], '')} + onChange={handleMetaChange} /> )} @@ -253,6 +334,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug }) = EditSettingsView.defaultProps = { isContentTypeView: false, + updateLayout: null, }; EditSettingsView.propTypes = { @@ -270,6 +352,7 @@ EditSettingsView.propTypes = { options: PropTypes.object.isRequired, }).isRequired, slug: PropTypes.string.isRequired, + updateLayout: PropTypes.func, }; export default EditSettingsView; diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..8609f33606 --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap @@ -0,0 +1,6112 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EditSettingsView renders and matches the snapshot 1`] = ` +.c22 { + background: #ffffff; + padding-top: 24px; + padding-right: 32px; + padding-bottom: 24px; + padding-left: 32px; + border-radius: 4px; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); +} + +.c40 { + padding-top: 8px; + padding-bottom: 8px; +} + +.c54 { + padding: 16px; + border-radius: 4px; + border-style: dashed; + border-width: 1px; + border-color: #c0c0cf; +} + +.c63 { + overflow: hidden; + width: 100%; +} + +.c18 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; +} + +.c15 { + padding-right: 8px; +} + +.c12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; +} + +.c12 svg { + height: 12px; + width: 12px; +} + +.c12 svg > g, +.c12 svg path { + fill: #ffffff; +} + +.c12[aria-disabled='true'] { + pointer-events: none; +} + +.c12:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c12:focus-visible { + outline: none; +} + +.c12:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c16 { + height: 100%; +} + +.c13 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #4945ff; + background: #4945ff; +} + +.c13 .c14 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c13 .c17 { + color: #ffffff; +} + +.c13[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c13[aria-disabled='true'] .c17 { + color: #666687; +} + +.c13[aria-disabled='true'] svg > g, +.c13[aria-disabled='true'] svg path { + fill: #666687; +} + +.c13[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c13[aria-disabled='true']:active .c17 { + color: #666687; +} + +.c13[aria-disabled='true']:active svg > g, +.c13[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c13:hover { + border: 1px solid #7b79ff; + background: #7b79ff; +} + +.c13:active { + border: 1px solid #4945ff; + background: #4945ff; +} + +.c70 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #d9d8ff; + background: #f0f0ff; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; +} + +.c70 .c14 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c70 .c17 { + color: #ffffff; +} + +.c70[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c70[aria-disabled='true'] .c17 { + color: #666687; +} + +.c70[aria-disabled='true'] svg > g, +.c70[aria-disabled='true'] svg path { + fill: #666687; +} + +.c70[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c70[aria-disabled='true']:active .c17 { + color: #666687; +} + +.c70[aria-disabled='true']:active svg > g, +.c70[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c70:hover { + background-color: #ffffff; +} + +.c70:active { + background-color: #ffffff; + border: 1px solid #4945ff; +} + +.c70:active .c17 { + color: #4945ff; +} + +.c70:active svg > g, +.c70:active svg path { + fill: #4945ff; +} + +.c70 .c17 { + color: #271fe0; +} + +.c70 svg > g, +.c70 svg path { + fill: #271fe0; +} + +.c57 { + background: #f6f6f9; + border-radius: 4px; + border-color: #eaeaef; + border: 1px solid #eaeaef; + width: 100%; + min-height: 2rem; +} + +.c59 { + padding-right: 12px; + padding-left: 12px; +} + +.c64 { + padding-left: 12px; +} + +.c45 { + 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; +} + +.c58 { + 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: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; +} + +.c60 { + 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; +} + +.c65 { + 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: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; +} + +.c67 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; +} + +.c67 svg { + height: 12px; + width: 12px; +} + +.c67 svg > g, +.c67 svg path { + fill: #ffffff; +} + +.c67[aria-disabled='true'] { + pointer-events: none; +} + +.c67:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c67:focus-visible { + outline: none; +} + +.c67:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c68 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; + border: none; +} + +.c68 svg > g, +.c68 svg path { + fill: #8e8ea9; +} + +.c68:hover svg > g, +.c68:hover svg path { + fill: #666687; +} + +.c68:active svg > g, +.c68:active svg path { + fill: #a5a5ba; +} + +.c68[aria-disabled='true'] { + background-color: #eaeaef; +} + +.c68[aria-disabled='true'] svg path { + fill: #666687; +} + +.c31 { + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + width: 100%; + background: transparent; + border: none; +} + +.c31:focus { + outline: none; +} + +.c31[aria-disabled='true'] { + cursor: not-allowed; +} + +.c28 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; +} + +.c35 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c39 { + font-weight: 400; + font-size: 0.75rem; + line-height: 1.33; + color: #666687; +} + +.c34 { + padding-right: 16px; + padding-left: 16px; +} + +.c36 { + padding-left: 12px; +} + +.c29 { + 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; +} + +.c32 { + 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; +} + +.c27 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c27 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c27 > * + * { + margin-top: 4px; +} + +.c30 { + position: relative; + border: 1px solid #dcdce4; + padding-right: 12px; + border-radius: 4px; + background: #ffffff; + overflow: hidden; + min-height: 2.5rem; + outline: none; + box-shadow: 0; + -webkit-transition-property: border-color,box-shadow,fill; + transition-property: border-color,box-shadow,fill; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; +} + +.c30:focus-within { + border: 1px solid #4945ff; + box-shadow: #4945ff 0px 0px 0px 2px; +} + +.c37 { + background: transparent; + border: none; + position: relative; + z-index: 1; +} + +.c37 svg { + height: 0.6875rem; + width: 0.6875rem; +} + +.c37 svg path { + fill: #666687; +} + +.c38 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: none; + border: none; +} + +.c38 svg { + width: 0.375rem; +} + +.c33 { + width: 100%; +} + +.c23 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c23 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c23 > * + * { + margin-top: 16px; +} + +.c55 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c55 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c55 > * + * { + margin-top: 8px; +} + +.c24 { + font-weight: 500; + font-size: 1rem; + line-height: 1.25; + color: #32324d; +} + +.c46 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c66 { + font-weight: 500; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c47 { + font-weight: 600; + line-height: 1.14; +} + +.c0 { + outline: none; +} + +.c1 { + background: #f6f6f9; + padding-top: 24px; + padding-right: 56px; + padding-bottom: 56px; + padding-left: 56px; +} + +.c2 { + padding-bottom: 12px; +} + +.c21 { + padding-right: 56px; + padding-left: 56px; +} + +.c9 { + 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; +} + +.c10 { + 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; +} + +.c11 { + font-weight: 600; + font-size: 2rem; + line-height: 1.25; + color: #32324d; +} + +.c19 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #666687; +} + +.c20 { + font-size: 1rem; + line-height: 1.5; +} + +.c6 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #4945ff; +} + +.c7 { + font-weight: 600; + line-height: 1.14; +} + +.c8 { + font-weight: 600; + font-size: 0.6875rem; + line-height: 1.45; + text-transform: uppercase; +} + +.c4 { + padding-right: 8px; +} + +.c3 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-transform: uppercase; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + outline: none; +} + +.c3 svg path { + fill: #4945ff; +} + +.c3 svg { + font-size: 0.625rem; +} + +.c3:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c3:focus-visible { + outline: none; +} + +.c3:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c25 { + display: grid; + grid-template-columns: repeat(12,1fr); + gap: 0px; +} + +.c43 { + display: grid; + grid-template-columns: repeat(12,1fr); + gap: 16px; +} + +.c26 { + grid-column: span 6; +} + +.c44 { + grid-column: span 8; +} + +.c56 { + grid-column: span 6; +} + +.c71 { + grid-column: span 4; +} + +.c41 { + background: #eaeaef; +} + +.c42 { + height: 1px; + border: none; + margin: 0; +} + +.c69 { + background-color: transparent; +} + +.c69 path { + fill: #666687; +} + +.c62 { + height: 0.75rem; + width: 0.75rem; +} + +.c62 path { + fill: #666687; +} + +.c61 { + border-right: 1px solid #dcdce4; +} + +.c53 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; +} + +.c51 { + padding-right: 8px; +} + +.c48 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; +} + +.c48 svg { + height: 12px; + width: 12px; +} + +.c48 svg > g, +.c48 svg path { + fill: #ffffff; +} + +.c48[aria-disabled='true'] { + pointer-events: none; +} + +.c48:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c48:focus-visible { + outline: none; +} + +.c48:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c49 { + padding: 8px 16px; + background: #4945ff; + border: none; + border-radius: 4px; + border: 1px solid #d9d8ff; + background: #f0f0ff; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c49 .c50 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c49 .c52 { + color: #ffffff; +} + +.c49[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c49[aria-disabled='true'] .c52 { + color: #666687; +} + +.c49[aria-disabled='true'] svg > g, +.c49[aria-disabled='true'] svg path { + fill: #666687; +} + +.c49[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c49[aria-disabled='true']:active .c52 { + color: #666687; +} + +.c49[aria-disabled='true']:active svg > g, +.c49[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c49:hover { + background-color: #ffffff; +} + +.c49:active { + background-color: #ffffff; + border: 1px solid #4945ff; +} + +.c49:active .c52 { + color: #4945ff; +} + +.c49:active svg > g, +.c49:active svg path { + fill: #4945ff; +} + +.c49 .c52 { + color: #271fe0; +} + +.c49 svg > g, +.c49 svg path { + fill: #271fe0; +} + +@media (max-width:68.75rem) { + .c26 { + grid-column: span 12; + } +} + +@media (max-width:34.375rem) { + .c26 { + grid-column: span; + } +} + +@media (max-width:68.75rem) { + .c44 { + grid-column: span 12; + } +} + +@media (max-width:34.375rem) { + .c44 { + grid-column: span; + } +} + +@media (max-width:68.75rem) { + .c56 { + grid-column: span; + } +} + +@media (max-width:34.375rem) { + .c56 { + grid-column: span; + } +} + +@media (max-width:68.75rem) { + .c71 { + grid-column: span 12; + } +} + +@media (max-width:34.375rem) { + .c71 { + grid-column: span; + } +} + +
+
+
+
+
+ + + + Go back + + +
+
+
+

+ Configure the view - Address +

+
+ +
+

+ Customize how the edit view will look like. +

+
+
+
+
+
+

+ Settings +

+
+
+
+
+
+ + Entry title + +
+ +
+
+
+

+ Set the display field of your entry +

+
+
+
+
+
+
+
+
+

+ View +

+
+
+
+
+
+
+
+ + Displayed fields + +
+
+ +
+
+
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+ + postal_code + +
+
+ + + + + + +
+
+
+
+
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+ + city + +
+
+ + + + + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ + Relational fields + +
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+ + categories + +
+
+ + + + + + +
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +
+
+`; + +exports[`EditSettingsView should add field 1`] = ` + + .c22 { + background: #ffffff; + padding-top: 24px; + padding-right: 32px; + padding-bottom: 24px; + padding-left: 32px; + border-radius: 4px; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); +} + +.c40 { + padding-top: 8px; + padding-bottom: 8px; +} + +.c54 { + padding: 16px; + border-radius: 4px; + border-style: dashed; + border-width: 1px; + border-color: #c0c0cf; +} + +.c63 { + overflow: hidden; + width: 100%; +} + +.c18 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; +} + +.c15 { + padding-right: 8px; +} + +.c12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; +} + +.c12 svg { + height: 12px; + width: 12px; +} + +.c12 svg > g, +.c12 svg path { + fill: #ffffff; +} + +.c12[aria-disabled='true'] { + pointer-events: none; +} + +.c12:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c12:focus-visible { + outline: none; +} + +.c12:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c16 { + height: 100%; +} + +.c13 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #4945ff; + background: #4945ff; +} + +.c13 .c14 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c13 .c17 { + color: #ffffff; +} + +.c13[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c13[aria-disabled='true'] .c17 { + color: #666687; +} + +.c13[aria-disabled='true'] svg > g, +.c13[aria-disabled='true'] svg path { + fill: #666687; +} + +.c13[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c13[aria-disabled='true']:active .c17 { + color: #666687; +} + +.c13[aria-disabled='true']:active svg > g, +.c13[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c13:hover { + border: 1px solid #7b79ff; + background: #7b79ff; +} + +.c13:active { + border: 1px solid #4945ff; + background: #4945ff; +} + +.c70 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #d9d8ff; + background: #f0f0ff; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; +} + +.c70 .c14 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c70 .c17 { + color: #ffffff; +} + +.c70[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c70[aria-disabled='true'] .c17 { + color: #666687; +} + +.c70[aria-disabled='true'] svg > g, +.c70[aria-disabled='true'] svg path { + fill: #666687; +} + +.c70[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c70[aria-disabled='true']:active .c17 { + color: #666687; +} + +.c70[aria-disabled='true']:active svg > g, +.c70[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c70:hover { + background-color: #ffffff; +} + +.c70:active { + background-color: #ffffff; + border: 1px solid #4945ff; +} + +.c70:active .c17 { + color: #4945ff; +} + +.c70:active svg > g, +.c70:active svg path { + fill: #4945ff; +} + +.c70 .c17 { + color: #271fe0; +} + +.c70 svg > g, +.c70 svg path { + fill: #271fe0; +} + +.c57 { + background: #f6f6f9; + border-radius: 4px; + border-color: #eaeaef; + border: 1px solid #eaeaef; + width: 100%; + min-height: 2rem; +} + +.c59 { + padding-right: 12px; + padding-left: 12px; +} + +.c64 { + padding-left: 12px; +} + +.c45 { + 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; +} + +.c58 { + 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: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; +} + +.c60 { + 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; +} + +.c65 { + 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: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; +} + +.c67 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; +} + +.c67 svg { + height: 12px; + width: 12px; +} + +.c67 svg > g, +.c67 svg path { + fill: #ffffff; +} + +.c67[aria-disabled='true'] { + pointer-events: none; +} + +.c67:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c67:focus-visible { + outline: none; +} + +.c67:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c68 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; + border: none; +} + +.c68 svg > g, +.c68 svg path { + fill: #8e8ea9; +} + +.c68:hover svg > g, +.c68:hover svg path { + fill: #666687; +} + +.c68:active svg > g, +.c68:active svg path { + fill: #a5a5ba; +} + +.c68[aria-disabled='true'] { + background-color: #eaeaef; +} + +.c68[aria-disabled='true'] svg path { + fill: #666687; +} + +.c31 { + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + width: 100%; + background: transparent; + border: none; +} + +.c31:focus { + outline: none; +} + +.c31[aria-disabled='true'] { + cursor: not-allowed; +} + +.c28 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; +} + +.c35 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c39 { + font-weight: 400; + font-size: 0.75rem; + line-height: 1.33; + color: #666687; +} + +.c34 { + padding-right: 16px; + padding-left: 16px; +} + +.c36 { + padding-left: 12px; +} + +.c29 { + 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; +} + +.c32 { + 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; +} + +.c27 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c27 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c27 > * + * { + margin-top: 4px; +} + +.c30 { + position: relative; + border: 1px solid #dcdce4; + padding-right: 12px; + border-radius: 4px; + background: #ffffff; + overflow: hidden; + min-height: 2.5rem; + outline: none; + box-shadow: 0; + -webkit-transition-property: border-color,box-shadow,fill; + transition-property: border-color,box-shadow,fill; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; +} + +.c30:focus-within { + border: 1px solid #4945ff; + box-shadow: #4945ff 0px 0px 0px 2px; +} + +.c37 { + background: transparent; + border: none; + position: relative; + z-index: 1; +} + +.c37 svg { + height: 0.6875rem; + width: 0.6875rem; +} + +.c37 svg path { + fill: #666687; +} + +.c38 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: none; + border: none; +} + +.c38 svg { + width: 0.375rem; +} + +.c33 { + width: 100%; +} + +.c23 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c23 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c23 > * + * { + margin-top: 16px; +} + +.c55 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c55 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c55 > * + * { + margin-top: 8px; +} + +.c24 { + font-weight: 500; + font-size: 1rem; + line-height: 1.25; + color: #32324d; +} + +.c46 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c66 { + font-weight: 500; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c47 { + font-weight: 600; + line-height: 1.14; +} + +.c0 { + outline: none; +} + +.c1 { + background: #f6f6f9; + padding-top: 24px; + padding-right: 56px; + padding-bottom: 56px; + padding-left: 56px; +} + +.c2 { + padding-bottom: 12px; +} + +.c21 { + padding-right: 56px; + padding-left: 56px; +} + +.c9 { + 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; +} + +.c10 { + 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; +} + +.c11 { + font-weight: 600; + font-size: 2rem; + line-height: 1.25; + color: #32324d; +} + +.c19 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #666687; +} + +.c20 { + font-size: 1rem; + line-height: 1.5; +} + +.c6 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #4945ff; +} + +.c7 { + font-weight: 600; + line-height: 1.14; +} + +.c8 { + font-weight: 600; + font-size: 0.6875rem; + line-height: 1.45; + text-transform: uppercase; +} + +.c4 { + padding-right: 8px; +} + +.c3 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-transform: uppercase; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + outline: none; +} + +.c3 svg path { + fill: #4945ff; +} + +.c3 svg { + font-size: 0.625rem; +} + +.c3:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c3:focus-visible { + outline: none; +} + +.c3:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c25 { + display: grid; + grid-template-columns: repeat(12,1fr); + gap: 0px; +} + +.c43 { + display: grid; + grid-template-columns: repeat(12,1fr); + gap: 16px; +} + +.c26 { + grid-column: span 6; +} + +.c44 { + grid-column: span 8; +} + +.c56 { + grid-column: span 6; +} + +.c71 { + grid-column: span 4; +} + +.c41 { + background: #eaeaef; +} + +.c42 { + height: 1px; + border: none; + margin: 0; +} + +.c69 { + background-color: transparent; +} + +.c69 path { + fill: #666687; +} + +.c62 { + height: 0.75rem; + width: 0.75rem; +} + +.c62 path { + fill: #666687; +} + +.c61 { + border-right: 1px solid #dcdce4; +} + +.c53 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; +} + +.c51 { + padding-right: 8px; +} + +.c48 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; +} + +.c48 svg { + height: 12px; + width: 12px; +} + +.c48 svg > g, +.c48 svg path { + fill: #ffffff; +} + +.c48[aria-disabled='true'] { + pointer-events: none; +} + +.c48:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c48:focus-visible { + outline: none; +} + +.c48:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c49 { + padding: 8px 16px; + background: #4945ff; + border: none; + border-radius: 4px; + border: 1px solid #d9d8ff; + background: #f0f0ff; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c49 .c50 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c49 .c52 { + color: #ffffff; +} + +.c49[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c49[aria-disabled='true'] .c52 { + color: #666687; +} + +.c49[aria-disabled='true'] svg > g, +.c49[aria-disabled='true'] svg path { + fill: #666687; +} + +.c49[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c49[aria-disabled='true']:active .c52 { + color: #666687; +} + +.c49[aria-disabled='true']:active svg > g, +.c49[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c49:hover { + background-color: #ffffff; +} + +.c49:active { + background-color: #ffffff; + border: 1px solid #4945ff; +} + +.c49:active .c52 { + color: #4945ff; +} + +.c49:active svg > g, +.c49:active svg path { + fill: #4945ff; +} + +.c49 .c52 { + color: #271fe0; +} + +.c49 svg > g, +.c49 svg path { + fill: #271fe0; +} + +@media (max-width:68.75rem) { + .c26 { + grid-column: span 12; + } +} + +@media (max-width:34.375rem) { + .c26 { + grid-column: span; + } +} + +@media (max-width:68.75rem) { + .c44 { + grid-column: span 12; + } +} + +@media (max-width:34.375rem) { + .c44 { + grid-column: span; + } +} + +@media (max-width:68.75rem) { + .c56 { + grid-column: span; + } +} + +@media (max-width:34.375rem) { + .c56 { + grid-column: span; + } +} + +@media (max-width:68.75rem) { + .c71 { + grid-column: span 12; + } +} + +@media (max-width:34.375rem) { + .c71 { + grid-column: span; + } +} + +
+
+
+
+
+ + + + Go back + + +
+
+
+

+ Configure the view - Address +

+
+ +
+

+ Customize how the edit view will look like. +

+
+
+
+
+
+

+ Settings +

+
+
+
+
+
+ + Entry title + +
+ +
+
+
+

+ Set the display field of your entry +

+
+
+
+
+
+
+
+
+

+ View +

+
+
+
+
+
+
+
+ + Displayed fields + +
+
+ +
+
+
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+ + postal_code + +
+
+ + + + + + +
+
+
+
+
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+ + city + +
+
+ + + + + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ + Relational fields + +
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+ + categories + +
+
+ + + + + + +
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +
+
+ .c0 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +
+

+

+

+ .c0 { + background: #212134; + padding: 8px; + border-radius: 4px; +} + +.c2 { + font-weight: 400; + font-size: 0.75rem; + line-height: 1.33; + color: #ffffff; +} + +.c1 { + position: absolute; + z-index: 4; + display: none; +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +
+ +
+ .c0 { + background: #212134; + padding: 8px; + border-radius: 4px; +} + +.c2 { + font-weight: 400; + font-size: 0.75rem; + line-height: 1.33; + color: #ffffff; +} + +.c1 { + position: absolute; + z-index: 4; + display: none; +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +
+ +
+ .c0 { + background: #212134; + padding: 8px; + border-radius: 4px; +} + +.c2 { + font-weight: 400; + font-size: 0.75rem; + line-height: 1.33; + color: #ffffff; +} + +.c1 { + position: absolute; + z-index: 4; + display: none; +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +
+ +
+ .c0 { + background: #212134; + padding: 8px; + border-radius: 4px; +} + +.c2 { + font-weight: 400; + font-size: 0.75rem; + line-height: 1.33; + color: #ffffff; +} + +.c1 { + position: absolute; + z-index: 4; + display: none; +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +
+ +
+ .c0 { + background: #212134; + padding: 8px; + border-radius: 4px; +} + +.c2 { + font-weight: 400; + font-size: 0.75rem; + line-height: 1.33; + color: #ffffff; +} + +.c1 { + position: absolute; + z-index: 4; + display: none; +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +
+ +
+ .c0 { + background: #212134; + padding: 8px; + border-radius: 4px; +} + +.c2 { + font-weight: 400; + font-size: 0.75rem; + line-height: 1.33; + color: #ffffff; +} + +.c1 { + position: absolute; + z-index: 4; + display: none; +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +@media (max-width:68.75rem) { + +} + +@media (max-width:34.375rem) { + +} + +
+ +
+ +`; + +exports[`EditSettingsView should add relation 1`] = ` +.c72 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.c22 { + background: #ffffff; + padding-top: 24px; + padding-right: 32px; + padding-bottom: 24px; + padding-left: 32px; + border-radius: 4px; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); +} + +.c40 { + padding-top: 8px; + padding-bottom: 8px; +} + +.c54 { + padding: 16px; + border-radius: 4px; + border-style: dashed; + border-width: 1px; + border-color: #c0c0cf; +} + +.c63 { + overflow: hidden; + width: 100%; +} + +.c18 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; +} + +.c15 { + padding-right: 8px; +} + +.c12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; +} + +.c12 svg { + height: 12px; + width: 12px; +} + +.c12 svg > g, +.c12 svg path { + fill: #ffffff; +} + +.c12[aria-disabled='true'] { + pointer-events: none; +} + +.c12:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c12:focus-visible { + outline: none; +} + +.c12:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c16 { + height: 100%; +} + +.c13 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #4945ff; + background: #4945ff; +} + +.c13 .c14 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c13 .c17 { + color: #ffffff; +} + +.c13[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c13[aria-disabled='true'] .c17 { + color: #666687; +} + +.c13[aria-disabled='true'] svg > g, +.c13[aria-disabled='true'] svg path { + fill: #666687; +} + +.c13[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c13[aria-disabled='true']:active .c17 { + color: #666687; +} + +.c13[aria-disabled='true']:active svg > g, +.c13[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c13:hover { + border: 1px solid #7b79ff; + background: #7b79ff; +} + +.c13:active { + border: 1px solid #4945ff; + background: #4945ff; +} + +.c70 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #d9d8ff; + background: #f0f0ff; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; +} + +.c70 .c14 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c70 .c17 { + color: #ffffff; +} + +.c70[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c70[aria-disabled='true'] .c17 { + color: #666687; +} + +.c70[aria-disabled='true'] svg > g, +.c70[aria-disabled='true'] svg path { + fill: #666687; +} + +.c70[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c70[aria-disabled='true']:active .c17 { + color: #666687; +} + +.c70[aria-disabled='true']:active svg > g, +.c70[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c70:hover { + background-color: #ffffff; +} + +.c70:active { + background-color: #ffffff; + border: 1px solid #4945ff; +} + +.c70:active .c17 { + color: #4945ff; +} + +.c70:active svg > g, +.c70:active svg path { + fill: #4945ff; +} + +.c70 .c17 { + color: #271fe0; +} + +.c70 svg > g, +.c70 svg path { + fill: #271fe0; +} + +.c57 { + background: #f6f6f9; + border-radius: 4px; + border-color: #eaeaef; + border: 1px solid #eaeaef; + width: 100%; + min-height: 2rem; +} + +.c59 { + padding-right: 12px; + padding-left: 12px; +} + +.c64 { + padding-left: 12px; +} + +.c45 { + 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; +} + +.c58 { + 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: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; +} + +.c60 { + 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; +} + +.c65 { + 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: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; +} + +.c73 { + background: #212134; + padding: 8px; + border-radius: 4px; +} + +.c75 { + font-weight: 400; + font-size: 0.75rem; + line-height: 1.33; + color: #ffffff; +} + +.c74 { + position: absolute; + z-index: 4; + display: none; +} + +.c67 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; +} + +.c67 svg { + height: 12px; + width: 12px; +} + +.c67 svg > g, +.c67 svg path { + fill: #ffffff; +} + +.c67[aria-disabled='true'] { + pointer-events: none; +} + +.c67:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c67:focus-visible { + outline: none; +} + +.c67:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c68 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; + border: none; +} + +.c68 svg > g, +.c68 svg path { + fill: #8e8ea9; +} + +.c68:hover svg > g, +.c68:hover svg path { + fill: #666687; +} + +.c68:active svg > g, +.c68:active svg path { + fill: #a5a5ba; +} + +.c68[aria-disabled='true'] { + background-color: #eaeaef; +} + +.c68[aria-disabled='true'] svg path { + fill: #666687; +} + +.c31 { + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + width: 100%; + background: transparent; + border: none; +} + +.c31:focus { + outline: none; +} + +.c31[aria-disabled='true'] { + cursor: not-allowed; +} + +.c28 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; +} + +.c35 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c39 { + font-weight: 400; + font-size: 0.75rem; + line-height: 1.33; + color: #666687; +} + +.c34 { + padding-right: 16px; + padding-left: 16px; +} + +.c36 { + padding-left: 12px; +} + +.c29 { + 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; +} + +.c32 { + 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; +} + +.c27 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c27 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c27 > * + * { + margin-top: 4px; +} + +.c30 { + position: relative; + border: 1px solid #dcdce4; + padding-right: 12px; + border-radius: 4px; + background: #ffffff; + overflow: hidden; + min-height: 2.5rem; + outline: none; + box-shadow: 0; + -webkit-transition-property: border-color,box-shadow,fill; + transition-property: border-color,box-shadow,fill; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; +} + +.c30:focus-within { + border: 1px solid #4945ff; + box-shadow: #4945ff 0px 0px 0px 2px; +} + +.c37 { + background: transparent; + border: none; + position: relative; + z-index: 1; +} + +.c37 svg { + height: 0.6875rem; + width: 0.6875rem; +} + +.c37 svg path { + fill: #666687; +} + +.c38 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: none; + border: none; +} + +.c38 svg { + width: 0.375rem; +} + +.c33 { + width: 100%; +} + +.c23 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c23 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c23 > * + * { + margin-top: 16px; +} + +.c55 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c55 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c55 > * + * { + margin-top: 8px; +} + +.c24 { + font-weight: 500; + font-size: 1rem; + line-height: 1.25; + color: #32324d; +} + +.c46 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c66 { + font-weight: 500; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c47 { + font-weight: 600; + line-height: 1.14; +} + +.c0 { + outline: none; +} + +.c1 { + background: #f6f6f9; + padding-top: 24px; + padding-right: 56px; + padding-bottom: 56px; + padding-left: 56px; +} + +.c2 { + padding-bottom: 12px; +} + +.c21 { + padding-right: 56px; + padding-left: 56px; +} + +.c9 { + 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; +} + +.c10 { + 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; +} + +.c11 { + font-weight: 600; + font-size: 2rem; + line-height: 1.25; + color: #32324d; +} + +.c19 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #666687; +} + +.c20 { + font-size: 1rem; + line-height: 1.5; +} + +.c6 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #4945ff; +} + +.c7 { + font-weight: 600; + line-height: 1.14; +} + +.c8 { + font-weight: 600; + font-size: 0.6875rem; + line-height: 1.45; + text-transform: uppercase; +} + +.c4 { + padding-right: 8px; +} + +.c3 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-transform: uppercase; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + outline: none; +} + +.c3 svg path { + fill: #4945ff; +} + +.c3 svg { + font-size: 0.625rem; +} + +.c3:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c3:focus-visible { + outline: none; +} + +.c3:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c25 { + display: grid; + grid-template-columns: repeat(12,1fr); + gap: 0px; +} + +.c43 { + display: grid; + grid-template-columns: repeat(12,1fr); + gap: 16px; +} + +.c26 { + grid-column: span 6; +} + +.c44 { + grid-column: span 8; +} + +.c56 { + grid-column: span 6; +} + +.c71 { + grid-column: span 4; +} + +.c41 { + background: #eaeaef; +} + +.c42 { + height: 1px; + border: none; + margin: 0; +} + +.c69 { + background-color: transparent; +} + +.c69 path { + fill: #666687; +} + +.c62 { + height: 0.75rem; + width: 0.75rem; +} + +.c62 path { + fill: #666687; +} + +.c61 { + border-right: 1px solid #dcdce4; +} + +.c53 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; +} + +.c51 { + padding-right: 8px; +} + +.c48 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; +} + +.c48 svg { + height: 12px; + width: 12px; +} + +.c48 svg > g, +.c48 svg path { + fill: #ffffff; +} + +.c48[aria-disabled='true'] { + pointer-events: none; +} + +.c48:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c48:focus-visible { + outline: none; +} + +.c48:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c49 { + padding: 8px 16px; + background: #4945ff; + border: none; + border-radius: 4px; + border: 1px solid #d9d8ff; + background: #f0f0ff; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c49 .c50 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c49 .c52 { + color: #ffffff; +} + +.c49[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c49[aria-disabled='true'] .c52 { + color: #666687; +} + +.c49[aria-disabled='true'] svg > g, +.c49[aria-disabled='true'] svg path { + fill: #666687; +} + +.c49[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c49[aria-disabled='true']:active .c52 { + color: #666687; +} + +.c49[aria-disabled='true']:active svg > g, +.c49[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c49:hover { + background-color: #ffffff; +} + +.c49:active { + background-color: #ffffff; + border: 1px solid #4945ff; +} + +.c49:active .c52 { + color: #4945ff; +} + +.c49:active svg > g, +.c49:active svg path { + fill: #4945ff; +} + +.c49 .c52 { + color: #271fe0; +} + +.c49 svg > g, +.c49 svg path { + fill: #271fe0; +} + +@media (max-width:68.75rem) { + .c26 { + grid-column: span 12; + } +} + +@media (max-width:34.375rem) { + .c26 { + grid-column: span; + } +} + +@media (max-width:68.75rem) { + .c44 { + grid-column: span 12; + } +} + +@media (max-width:34.375rem) { + .c44 { + grid-column: span; + } +} + +@media (max-width:68.75rem) { + .c56 { + grid-column: span; + } +} + +@media (max-width:34.375rem) { + .c56 { + grid-column: span; + } +} + +@media (max-width:68.75rem) { + .c71 { + grid-column: span 12; + } +} + +@media (max-width:34.375rem) { + .c71 { + grid-column: span; + } +} + + +
+
+
+
+
+ + + + Go back + + +
+
+
+

+ Configure the view - Address +

+
+ +
+

+ Customize how the edit view will look like. +

+
+
+
+
+
+

+ Settings +

+
+
+
+
+
+ + Entry title + +
+ +
+
+
+

+ Set the display field of your entry +

+
+
+
+
+
+
+
+
+

+ View +

+
+
+
+
+
+
+
+ + Displayed fields + +
+
+ +
+
+
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+ + postal_code + +
+
+ + + + + + +
+
+
+
+
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+ + city + +
+
+ + + + + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ + Relational fields + +
+
+
+
+
+
+ + + + + + + + + +
+
+
+
+ + categories + +
+
+ + + + + + +
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +
+
+
+

+

+

+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +`; diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/index.test.js index 73b3351720..9b56ba2985 100644 --- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/index.test.js +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/index.test.js @@ -1,8 +1,9 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render, waitFor, screen, fireEvent } from '@testing-library/react'; import { Router } from 'react-router-dom'; import { createMemoryHistory } from 'history'; import { IntlProvider } from 'react-intl'; +import { QueryClient, QueryClientProvider } from 'react-query'; import { ThemeProvider } from '@strapi/design-system/ThemeProvider'; import { lightTheme } from '@strapi/design-system/themes'; import EditSettingsView from '../index'; @@ -11,24 +12,127 @@ jest.mock('@strapi/helper-plugin', () => ({ ...jest.requireActual('@strapi/helper-plugin'), // eslint-disable-next-line CheckPermissions: ({ children }) =>
{children}
, + useNotification: jest.fn(), + useTracking: jest.fn(() => ({ trackUsage: jest.fn() })), })); +const client = new QueryClient({ + defaultOptions: { + queries: { + retry: false, + }, + }, +}); + +const makeApp = (history, layout) => { + const mainLayout = { + attributes: { + id: { type: 'integer' }, + postal_code: { type: 'integer' }, + }, + kind: 'collectionType', + layouts: { + edit: [[{ name: 'postal_code', size: 6 }, { name: 'city', size: 6 }]], + list: ['postal_code', 'categories'], + editRelations: ['categories'], + }, + metadatas: { + postal_code: { edit: {}, list: { label: 'postal_code' } }, + }, + settings: { mainField: 'postal_code' }, + options: {}, + info: { + description: 'the address', + displayName: 'address', + label: 'address', + name: 'address', + }, + }; + const components = { + compo1: { uid: 'compo1' }, + }; + + return ( + + + + + + + + + + ); +}; + describe('EditSettingsView', () => { - it('should render correclty', () => { + it('renders and matches the snapshot', async () => { const history = createMemoryHistory(); - const mainLayout = { + + const { container } = render(makeApp(history)); + await waitFor(() => + expect(screen.getByText('Configure the view - Address')).toBeInTheDocument() + ); + + expect(container.firstChild).toMatchSnapshot(); + }); + + it('should add relation', async () => { + const history = createMemoryHistory(); + + const { container } = render(makeApp(history), { container: document.body }); + + await waitFor(() => + expect(screen.getByText('Configure the view - Address')).toBeInTheDocument() + ); + + fireEvent.mouseDown(screen.getByTestId('add-relation')); + + await waitFor(() => expect(screen.getByText('categories')).toBeInTheDocument()); + + fireEvent.mouseDown(screen.getByText('categories')); + fireEvent.mouseDown(screen.getByTestId('add-relation')); + + expect(container).toMatchSnapshot(); + }); + + it('should add field', async () => { + const history = createMemoryHistory(); + + const { container } = render(makeApp(history), { container: document.body }); + + await waitFor(() => + expect(screen.getByText('Configure the view - Address')).toBeInTheDocument() + ); + + fireEvent.mouseDown(screen.getByTestId('add-field')); + + await waitFor(() => expect(screen.getByText('city')).toBeInTheDocument()); + + fireEvent.mouseDown(screen.getByText('city')); + fireEvent.mouseDown(screen.getByTestId('add-field')); + + expect(container).toMatchSnapshot(); + }); + + it('should delete field', async () => { + const history = createMemoryHistory(); + const oneFieldLayout = { attributes: { - id: { type: 'integer' }, postal_code: { type: 'integer' }, }, kind: 'collectionType', layouts: { edit: [[{ name: 'postal_code', size: 6 }]], - list: ['postal_code', 'categories'], - editRelations: ['categories'], + list: ['postal_code'], + editRelations: [], }, metadatas: { - id: { edit: {}, list: { label: 'id' } }, postal_code: { edit: {}, list: { label: 'postal_code' } }, }, settings: { mainField: 'postal_code' }, @@ -40,1745 +144,16 @@ describe('EditSettingsView', () => { name: 'address', }, }; - const components = { - compo1: { uid: 'compo1' }, - }; - const { container } = render( - - - - - - - + + const { queryByTestId } = render(makeApp(history, oneFieldLayout)); + await waitFor(() => + expect(screen.getByText('Configure the view - Address')).toBeInTheDocument() ); - expect(container.firstChild).toMatchInlineSnapshot(` - .c0 { - outline: none; - } + expect(queryByTestId('delete-field')).toBeInTheDocument(); - .c1 { - background: #f6f6f9; - padding-top: 24px; - padding-right: 56px; - padding-bottom: 56px; - padding-left: 56px; - } + fireEvent.click(screen.getByTestId('delete-field')); - .c2 { - padding-bottom: 12px; - } - - .c21 { - padding-right: 56px; - padding-left: 56px; - } - - .c9 { - 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; - } - - .c10 { - 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; - } - - .c11 { - font-weight: 600; - font-size: 2rem; - line-height: 1.25; - color: #32324d; - } - - .c19 { - font-weight: 400; - font-size: 0.875rem; - line-height: 1.43; - color: #666687; - } - - .c20 { - font-size: 1rem; - line-height: 1.5; - } - - .c6 { - font-weight: 400; - font-size: 0.875rem; - line-height: 1.43; - color: #4945ff; - } - - .c7 { - font-weight: 600; - line-height: 1.14; - } - - .c8 { - font-weight: 600; - font-size: 0.6875rem; - line-height: 1.45; - text-transform: uppercase; - } - - .c4 { - padding-right: 8px; - } - - .c3 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-transform: uppercase; - -webkit-text-decoration: none; - text-decoration: none; - position: relative; - outline: none; - } - - .c3 svg path { - fill: #4945ff; - } - - .c3 svg { - font-size: 0.625rem; - } - - .c3:after { - -webkit-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; - border-radius: 8px; - content: ''; - position: absolute; - top: -4px; - bottom: -4px; - left: -4px; - right: -4px; - border: 2px solid transparent; - } - - .c3:focus-visible { - outline: none; - } - - .c3:focus-visible:after { - border-radius: 8px; - content: ''; - position: absolute; - top: -5px; - bottom: -5px; - left: -5px; - right: -5px; - border: 2px solid #4945ff; - } - - .c5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - } - - .c18 { - font-weight: 500; - font-size: 0.75rem; - line-height: 1.33; - color: #32324d; - } - - .c15 { - padding-right: 8px; - } - - .c12 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - cursor: pointer; - padding: 8px; - border-radius: 4px; - background: #ffffff; - border: 1px solid #dcdce4; - position: relative; - outline: none; - } - - .c12 svg { - height: 12px; - width: 12px; - } - - .c12 svg > g, - .c12 svg path { - fill: #ffffff; - } - - .c12[aria-disabled='true'] { - pointer-events: none; - } - - .c12:after { - -webkit-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; - border-radius: 8px; - content: ''; - position: absolute; - top: -4px; - bottom: -4px; - left: -4px; - right: -4px; - border: 2px solid transparent; - } - - .c12:focus-visible { - outline: none; - } - - .c12:focus-visible:after { - border-radius: 8px; - content: ''; - position: absolute; - top: -5px; - bottom: -5px; - left: -5px; - right: -5px; - border: 2px solid #4945ff; - } - - .c16 { - height: 100%; - } - - .c13 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 8px 16px; - background: #4945ff; - border: none; - border: 1px solid #4945ff; - background: #4945ff; - } - - .c13 .c14 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } - - .c13 .c17 { - color: #ffffff; - } - - .c13[aria-disabled='true'] { - border: 1px solid #dcdce4; - background: #eaeaef; - } - - .c13[aria-disabled='true'] .c17 { - color: #666687; - } - - .c13[aria-disabled='true'] svg > g, - .c13[aria-disabled='true'] svg path { - fill: #666687; - } - - .c13[aria-disabled='true']:active { - border: 1px solid #dcdce4; - background: #eaeaef; - } - - .c13[aria-disabled='true']:active .c17 { - color: #666687; - } - - .c13[aria-disabled='true']:active svg > g, - .c13[aria-disabled='true']:active svg path { - fill: #666687; - } - - .c13:hover { - border: 1px solid #7b79ff; - background: #7b79ff; - } - - .c13:active { - border: 1px solid #4945ff; - background: #4945ff; - } - - .c71 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 8px 16px; - background: #4945ff; - border: none; - border: 1px solid #d9d8ff; - background: #f0f0ff; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - } - - .c71 .c14 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } - - .c71 .c17 { - color: #ffffff; - } - - .c71[aria-disabled='true'] { - border: 1px solid #dcdce4; - background: #eaeaef; - } - - .c71[aria-disabled='true'] .c17 { - color: #666687; - } - - .c71[aria-disabled='true'] svg > g, - .c71[aria-disabled='true'] svg path { - fill: #666687; - } - - .c71[aria-disabled='true']:active { - border: 1px solid #dcdce4; - background: #eaeaef; - } - - .c71[aria-disabled='true']:active .c17 { - color: #666687; - } - - .c71[aria-disabled='true']:active svg > g, - .c71[aria-disabled='true']:active svg path { - fill: #666687; - } - - .c71:hover { - background-color: #ffffff; - } - - .c71:active { - background-color: #ffffff; - border: 1px solid #4945ff; - } - - .c71:active .c17 { - color: #4945ff; - } - - .c71:active svg > g, - .c71:active svg path { - fill: #4945ff; - } - - .c71 .c17 { - color: #271fe0; - } - - .c71 svg > g, - .c71 svg path { - fill: #271fe0; - } - - .c22 { - background: #ffffff; - padding-top: 24px; - padding-right: 32px; - padding-bottom: 24px; - padding-left: 32px; - border-radius: 4px; - box-shadow: 0px 1px 4px rgba(33,33,52,0.1); - } - - .c40 { - padding-top: 8px; - padding-bottom: 8px; - } - - .c54 { - padding: 16px; - border-radius: 4px; - border-style: dashed; - border-width: 1px; - border-color: #c0c0cf; - } - - .c63 { - overflow: hidden; - width: 100%; - } - - .c24 { - font-weight: 500; - font-size: 1rem; - line-height: 1.25; - color: #32324d; - } - - .c46 { - font-weight: 400; - font-size: 0.875rem; - line-height: 1.43; - color: #32324d; - } - - .c66 { - font-weight: 500; - font-size: 0.875rem; - line-height: 1.43; - color: #32324d; - } - - .c47 { - font-weight: 600; - line-height: 1.14; - } - - .c25 { - display: grid; - grid-template-columns: repeat(12,1fr); - gap: 0px; - } - - .c43 { - display: grid; - grid-template-columns: repeat(12,1fr); - gap: 16px; - } - - .c26 { - grid-column: span 6; - } - - .c44 { - grid-column: span 8; - } - - .c56 { - grid-column: span 6; - } - - .c72 { - grid-column: span 4; - } - - .c31 { - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - width: 100%; - background: transparent; - border: none; - } - - .c31:focus { - outline: none; - } - - .c31[aria-disabled='true'] { - cursor: not-allowed; - } - - .c28 { - font-weight: 500; - font-size: 0.75rem; - line-height: 1.33; - color: #32324d; - } - - .c35 { - font-weight: 400; - font-size: 0.875rem; - line-height: 1.43; - color: #32324d; - } - - .c39 { - font-weight: 400; - font-size: 0.75rem; - line-height: 1.33; - color: #666687; - } - - .c34 { - padding-right: 16px; - padding-left: 16px; - } - - .c36 { - padding-left: 12px; - } - - .c29 { - 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; - } - - .c32 { - 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; - } - - .c27 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - } - - .c27 > * { - margin-top: 0; - margin-bottom: 0; - } - - .c27 > * + * { - margin-top: 4px; - } - - .c30 { - position: relative; - border: 1px solid #dcdce4; - padding-right: 12px; - border-radius: 4px; - background: #ffffff; - overflow: hidden; - min-height: 2.5rem; - outline: none; - box-shadow: 0; - -webkit-transition-property: border-color,box-shadow,fill; - transition-property: border-color,box-shadow,fill; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; - } - - .c30:focus-within { - border: 1px solid #4945ff; - box-shadow: #4945ff 0px 0px 0px 2px; - } - - .c37 { - background: transparent; - border: none; - position: relative; - z-index: 1; - } - - .c37 svg { - height: 0.6875rem; - width: 0.6875rem; - } - - .c37 svg path { - fill: #666687; - } - - .c38 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background: none; - border: none; - } - - .c38 svg { - width: 0.375rem; - } - - .c33 { - width: 100%; - } - - .c23 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - } - - .c23 > * { - margin-top: 0; - margin-bottom: 0; - } - - .c23 > * + * { - margin-top: 16px; - } - - .c55 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - } - - .c55 > * { - margin-top: 0; - margin-bottom: 0; - } - - .c55 > * + * { - margin-top: 8px; - } - - .c41 { - background: #eaeaef; - } - - .c42 { - height: 1px; - border: none; - margin: 0; - } - - .c57 { - background: #f6f6f9; - border-radius: 4px; - border-color: #eaeaef; - border: 1px solid #eaeaef; - width: 100%; - min-height: 2rem; - } - - .c59 { - padding-right: 12px; - padding-left: 12px; - } - - .c64 { - padding-left: 12px; - } - - .c45 { - 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; - } - - .c58 { - 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: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - } - - .c60 { - 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; - } - - .c65 { - 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: baseline; - -webkit-box-align: baseline; - -ms-flex-align: baseline; - align-items: baseline; - } - - .c67 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - cursor: pointer; - padding: 8px; - border-radius: 4px; - background: #ffffff; - border: 1px solid #dcdce4; - position: relative; - outline: none; - } - - .c67 svg { - height: 12px; - width: 12px; - } - - .c67 svg > g, - .c67 svg path { - fill: #ffffff; - } - - .c67[aria-disabled='true'] { - pointer-events: none; - } - - .c67:after { - -webkit-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; - border-radius: 8px; - content: ''; - position: absolute; - top: -4px; - bottom: -4px; - left: -4px; - right: -4px; - border: 2px solid transparent; - } - - .c67:focus-visible { - outline: none; - } - - .c67:focus-visible:after { - border-radius: 8px; - content: ''; - position: absolute; - top: -5px; - bottom: -5px; - left: -5px; - right: -5px; - border: 2px solid #4945ff; - } - - .c68 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - height: 2rem; - width: 2rem; - border: none; - } - - .c68 svg > g, - .c68 svg path { - fill: #8e8ea9; - } - - .c68:hover svg > g, - .c68:hover svg path { - fill: #666687; - } - - .c68:active svg > g, - .c68:active svg path { - fill: #a5a5ba; - } - - .c68[aria-disabled='true'] { - background-color: #eaeaef; - } - - .c68[aria-disabled='true'] svg path { - fill: #666687; - } - - .c70 { - border: 0; - -webkit-clip: rect(0 0 0 0); - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - } - - .c69 { - background-color: transparent; - } - - .c62 { - height: 0.75rem; - width: 0.75rem; - } - - .c62 path { - fill: #666687; - } - - .c61 { - border-right: 1px solid #dcdce4; - } - - .c53 { - font-weight: 500; - font-size: 0.75rem; - line-height: 1.33; - color: #32324d; - } - - .c51 { - padding-right: 8px; - } - - .c48 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - cursor: pointer; - padding: 8px; - border-radius: 4px; - background: #ffffff; - border: 1px solid #dcdce4; - position: relative; - outline: none; - } - - .c48 svg { - height: 12px; - width: 12px; - } - - .c48 svg > g, - .c48 svg path { - fill: #ffffff; - } - - .c48[aria-disabled='true'] { - pointer-events: none; - } - - .c48:after { - -webkit-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; - border-radius: 8px; - content: ''; - position: absolute; - top: -4px; - bottom: -4px; - left: -4px; - right: -4px; - border: 2px solid transparent; - } - - .c48:focus-visible { - outline: none; - } - - .c48:focus-visible:after { - border-radius: 8px; - content: ''; - position: absolute; - top: -5px; - bottom: -5px; - left: -5px; - right: -5px; - border: 2px solid #4945ff; - } - - .c49 { - padding: 8px 16px; - background: #4945ff; - border: none; - border-radius: 4px; - border: 1px solid #d9d8ff; - background: #f0f0ff; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-text-decoration: none; - text-decoration: none; - } - - .c49 .c50 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } - - .c49 .c52 { - color: #ffffff; - } - - .c49[aria-disabled='true'] { - border: 1px solid #dcdce4; - background: #eaeaef; - } - - .c49[aria-disabled='true'] .c52 { - color: #666687; - } - - .c49[aria-disabled='true'] svg > g, - .c49[aria-disabled='true'] svg path { - fill: #666687; - } - - .c49[aria-disabled='true']:active { - border: 1px solid #dcdce4; - background: #eaeaef; - } - - .c49[aria-disabled='true']:active .c52 { - color: #666687; - } - - .c49[aria-disabled='true']:active svg > g, - .c49[aria-disabled='true']:active svg path { - fill: #666687; - } - - .c49:hover { - background-color: #ffffff; - } - - .c49:active { - background-color: #ffffff; - border: 1px solid #4945ff; - } - - .c49:active .c52 { - color: #4945ff; - } - - .c49:active svg > g, - .c49:active svg path { - fill: #4945ff; - } - - .c49 .c52 { - color: #271fe0; - } - - .c49 svg > g, - .c49 svg path { - fill: #271fe0; - } - - @media (max-width:68.75rem) { - .c26 { - grid-column: span 12; - } - } - - @media (max-width:34.375rem) { - .c26 { - grid-column: span; - } - } - - @media (max-width:68.75rem) { - .c44 { - grid-column: span 12; - } - } - - @media (max-width:34.375rem) { - .c44 { - grid-column: span; - } - } - - @media (max-width:68.75rem) { - .c56 { - grid-column: span; - } - } - - @media (max-width:34.375rem) { - .c56 { - grid-column: span; - } - } - - @media (max-width:68.75rem) { - .c72 { - grid-column: span 12; - } - } - - @media (max-width:34.375rem) { - .c72 { - grid-column: span; - } - } - -
-
-
-
- - - - Go back - - -
-
-
-

- Configure the view - Address -

-
- -
-

- Customize how the edit view will look like. -

-
-
-
-
-
-

- Settings -

-
-
-
-
-
- - Entry title - -
- -
-
-
-

- Set the display field of your entry -

-
-
-
-
-
-
-
-
-

- View -

-
-
-
-
-
-
-
- - Displayed fields - -
-
- -
-
-
-
-
-
-
-
- - - - - - - - - -
-
-
-
- - postal_code - -
-
- - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
- - Relational fields - -
-
-
-
-
-
- - - - - - - - - -
-
-
-
- - categories - -
-
- - - - - - -
-
-
-
-
- -
-
-
-
-
-
-
-
-
- -
- `); + expect(queryByTestId('delete-field')).not.toBeInTheDocument(); }); }); diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/utils/api.js b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/utils/api.js new file mode 100644 index 0000000000..f99179eff2 --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/utils/api.js @@ -0,0 +1,13 @@ +import { axiosInstance } from '../../../../core/utils'; +import { getRequestUrl } from '../../../utils'; + +const putCMSettingsEV = (body, slug, isContentTypeView) => { + return axiosInstance.put( + getRequestUrl( + isContentTypeView ? `content-types/${slug}/configuration` : `components/${slug}/configuration` + ), + body + ); +}; + +export default putCMSettingsEV; diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js index e39d93e5bf..6b6a54be07 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js @@ -15,39 +15,8 @@ import { Flex } from '@strapi/design-system/Flex'; import { Grid, GridItem } from '@strapi/design-system/Grid'; import { TextInput } from '@strapi/design-system/TextInput'; import { ToggleInput } from '@strapi/design-system/ToggleInput'; -import Date from '@strapi/icons/Date'; -import Boolean from '@strapi/icons/Boolean'; -import Email from '@strapi/icons/Email'; -import Enumeration from '@strapi/icons/Enumeration'; -import Media from '@strapi/icons/Media'; -import Relation from '@strapi/icons/Relation'; -import Text from '@strapi/icons/Text'; -import Uid from '@strapi/icons/Uid'; -import Number from '@strapi/icons/Number'; import { getTrad } from '../../../utils'; - -const iconByTypes = { - biginteger: , - boolean: , - date: , - datetime: , - decimal: , - email: , - enum: , - enumeration: , - file: , - files: , - float: , - integer: , - media: , - number: , - relation: , - string: , - text: , - time: , - timestamp: , - uid: , -}; +import FieldTypeIcon from '../../../components/FieldTypeIcon'; const HeaderContainer = styled(Flex)` svg { @@ -81,7 +50,7 @@ const EditFieldForm = ({
- {iconByTypes[type]} + {formatMessage( {