yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-29 10:22:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate some of the advanced and the base form

Browse Source 
Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette 2021-10-08 16:07:52 +02:00
parent d5359724d6
commit 7666e7c77f
17 changed files with 623 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap
View File

@ -461,7 +461,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
</div> </div>
<nav <nav
aria-label="pagination" aria-label="pagination"
class="sc-fTACoA" class="sc-jVKKMF"
> >
<ul <ul
class="c16 c17" class="c16 c17"

2
packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
View File

@ -1561,7 +1561,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
</div> </div>
<nav <nav
aria-label="pagination" aria-label="pagination"
class="sc-hJxDiT" class="sc-bAffKu"
> >
<ul <ul
class="c63 c64" class="c63 c64"

176
packages/core/content-type-builder/admin/src/components/FormModal/attributes/advancedForm.js
View File

@ -1,6 +1,6 @@
import React from 'react'; // import React from 'react';
import { FormattedMessage } from 'react-intl'; // import { FormattedMessage } from 'react-intl';
import isEmpty from 'lodash/isEmpty'; // import isEmpty from 'lodash/isEmpty';
import getTrad from '../../../utils/getTrad'; import getTrad from '../../../utils/getTrad';
import { componentForm } from '../component'; import { componentForm } from '../component';
import options from './attributeOptions'; import options from './attributeOptions';
@ -15,20 +15,28 @@ const advancedForm = {
{ {
autoFocus: true, autoFocus: true,
type: 'enum', type: 'enum',
label: { intlLabel: {
id: getTrad('form.attribute.settings.default'), id: getTrad('form.attribute.settings.default'),
defaultMessage: 'Default value',
}, },
name: 'default', name: 'default',
options: [ options: [],
{ value: 'true', label: 'TRUE' }, // options: [
{ value: '', label: 'NULL' }, // { value: 'true', label: 'TRUE' },
{ value: 'false', label: 'FALSE' }, // { value: '', label: 'NULL' },
], // { value: 'false', label: 'FALSE' },
// ],
// validations: {}, // validations: {},
}, },
], ],
}, },
{ sectionTitle: null, items: [options.required, options.unique, options.private] }, {
sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: [options.required, options.unique, options.private],
},
], ],
}; };
}, },
@ -41,7 +49,10 @@ const advancedForm = {
return { return {
sections: [ sections: [
{ {
sectionTitle: null, sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: [options.required, options.private, options.max, options.min], items: [options.required, options.private, options.max, options.min],
}, },
], ],
@ -49,7 +60,15 @@ const advancedForm = {
} }
return { return {
sections: [{ sectionTitle: null, items: [options.required, options.private] }], sections: [
{
sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: [options.required, options.private],
},
],
}; };
}, },
date: ({ type }) => { date: ({ type }) => {
@ -68,13 +87,27 @@ const advancedForm = {
}, },
], ],
}, },
{ sectionTitle: null, items: [options.required, options.unique, options.private] }, {
sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: [options.required, options.unique, options.private],
},
], ],
}; };
}, },
dynamiczone: () => { dynamiczone: () => {
return { return {
sections: [{ sectionTitle: null, items: [options.required, options.max, options.min] }], sections: [
{
sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: [options.required, options.max, options.min],
},
],
}; };
}, },
email: () => { email: () => {
@ -91,7 +124,10 @@ const advancedForm = {
}, },
{ {
sectionTitle: null, sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: [ items: [
options.required, options.required,
options.unique, options.unique,
@ -112,51 +148,71 @@ const advancedForm = {
{ {
name: 'default', name: 'default',
type: 'select', type: 'select',
label: { intlLabel: {
id: getTrad('form.attribute.settings.default'), id: getTrad('form.attribute.settings.default'),
defaultMessage: 'Default value',
}, },
validations: {}, validations: {},
options: [ options: [
<FormattedMessage {
key="hidden___value__placeholder" key: '__null_reset_value__',
id="components.InputSelect.option.placeholder" value: '',
> metadatas: {
{msg => <option value="">{msg}</option>} intlLabel: {
</FormattedMessage>, id: 'components.InputSelect.option.placeholder',
].concat( defaultMessage: 'Choose here',
data.enum },
? data.enum },
.filter((val, index) => data.enum.indexOf(val) === index && !isEmpty(val)) },
.map(val => ( ...(data.enum || [])
<option key={val} value={val}> .filter((value, index) => data.enum.indexOf(value) === index && value)
{val} .map(value => {
</option> return {
)) key: value,
: [] value,
), metadatas: {
intlLabel: { id: `${value}.no-override`, defaultMessage: value },
},
};
}),
],
}, },
{ {
label: { intlLabel: {
id: getTrad('form.attribute.item.enumeration.graphql'), id: getTrad('form.attribute.item.enumeration.graphql'),
defaultMessage: 'Name override for GraphQL',
}, },
name: 'enumName', name: 'enumName',
type: 'text', type: 'text',
validations: {}, validations: {},
description: { description: {
id: getTrad('form.attribute.item.enumeration.graphql.description'), id: getTrad('form.attribute.item.enumeration.graphql.description'),
defaultMessage: 'Allows you to override the default generated name for GraphQL',
}, },
}, },
], ],
}, },
{ sectionTitle: null, items: [options.required, options.unique, options.private] }, {
sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: [options.required, options.unique, options.private],
},
], ],
}; };
}, },
json: () => { json: () => {
return { return {
sections: [ sections: [
{ sectionTitle: null, items: [options.required, options.unique, options.private] }, {
sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: [options.required, options.unique, options.private],
},
], ],
}; };
}, },
@ -165,11 +221,15 @@ const advancedForm = {
sections: [ sections: [
{ sectionTitle: null, items: [options.required, options.unique] }, { sectionTitle: null, items: [options.required, options.unique] },
{ {
sectionTitle: null, sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: [ items: [
{ {
label: { intlLabel: {
id: getTrad('form.attribute.media.allowed-types'), id: getTrad('form.attribute.media.allowed-types'),
defaultMessage: 'Select allowed types of media',
}, },
name: 'allowedTypes', name: 'allowedTypes',
type: 'allowedTypesSelect', type: 'allowedTypesSelect',
@ -183,7 +243,7 @@ const advancedForm = {
}; };
}, },
number: data => { number: data => {
const inputStep = data.type === 'decimal' || data.type === 'float' ? 'any' : '1'; const inputStep = data.type === 'decimal' || data.type === 'float' ? 'any' : 1;
return { return {
sections: [ sections: [
@ -195,15 +255,19 @@ const advancedForm = {
name: 'default', name: 'default',
type: data.type === 'biginteger' ? 'text' : 'number', type: data.type === 'biginteger' ? 'text' : 'number',
step: inputStep, step: inputStep,
label: { intlLabel: {
id: getTrad('form.attribute.settings.default'), id: getTrad('form.attribute.settings.default'),
defaultMessage: 'Default value',
}, },
validations: {}, validations: {},
}, },
], ],
}, },
{ {
sectionTitle: null, sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: [options.required, options.unique, options.max, options.min, options.private], items: [options.required, options.unique, options.max, options.min, options.private],
}, },
], ],
@ -215,7 +279,10 @@ const advancedForm = {
{ sectionTitle: null, items: [options.default] }, { sectionTitle: null, items: [options.default] },
{ {
sectionTitle: null, sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: [ items: [
options.required, options.required,
options.unique, options.unique,
@ -229,7 +296,15 @@ const advancedForm = {
}, },
relation: () => { relation: () => {
return { return {
sections: [{ sectionTitle: null, items: [options.private] }], sections: [
{
sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: [options.private],
},
],
}; };
}, },
richtext: () => { richtext: () => {
@ -237,7 +312,10 @@ const advancedForm = {
sections: [ sections: [
{ sectionTitle: null, items: [options.default] }, { sectionTitle: null, items: [options.default] },
{ {
sectionTitle: null, sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: [ items: [
options.required, options.required,
options.unique, options.unique,
@ -255,7 +333,10 @@ const advancedForm = {
{ sectionTitle: null, items: [options.default, options.regex] }, { sectionTitle: null, items: [options.default, options.regex] },
{ {
sectionTitle: null, sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: [ items: [
options.required, options.required,
options.unique, options.unique,
@ -276,7 +357,10 @@ const advancedForm = {
}, },
{ {
sectionTitle: null, sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: [options.required, options.maxLength, options.minLength, options.private], items: [options.required, options.maxLength, options.minLength, options.private],
}, },
], ],

311
packages/core/content-type-builder/admin/src/components/FormModal/attributes/baseForm.js
View File

@ -1,5 +1,5 @@
import React, { Fragment } from 'react'; // import React, { Fragment } from 'react';
import { FormattedMessage } from 'react-intl'; // import { FormattedMessage } from 'react-intl';
import getTrad from '../../../utils/getTrad'; import getTrad from '../../../utils/getTrad';
import { componentField, componentForm } from '../component'; import { componentField, componentForm } from '../component';
import { nameField } from './nameField'; import { nameField } from './nameField';
@ -24,8 +24,9 @@ const baseForm = {
{ {
name: 'component', name: 'component',
type: 'componentSelect', type: 'componentSelect',
label: { intlLabel: {
id: getTrad('modalForm.attributes.select-component'), id: getTrad('modalForm.attributes.select-component'),
defaultMessage: 'Select a component',
}, },
isMultiple: false, isMultiple: false,
}, },
@ -35,25 +36,27 @@ const baseForm = {
sectionTitle: null, sectionTitle: null,
items: [ items: [
{ {
label: { intlLabel: {
id: getTrad('modalForm.attribute.text.type-selection'), id: getTrad('modalForm.attribute.text.type-selection'),
defaultMessage: 'Type',
}, },
name: 'repeatable', name: 'repeatable',
type: 'booleanBox', type: 'booleanBox',
size: 12, size: 12,
options: [ // FIXME
{ // options: [
headerId: getTrad('form.attribute.component.option.repeatable'), // {
descriptionId: getTrad('form.attribute.component.option.repeatable.description'), // headerId: getTrad('form.attribute.component.option.repeatable'),
value: true, // descriptionId: getTrad('form.attribute.component.option.repeatable.description'),
}, // value: true,
{ // },
headerId: getTrad('form.attribute.component.option.single'), // {
descriptionId: getTrad('form.attribute.component.option.single.description'), // headerId: getTrad('form.attribute.component.option.single'),
value: false, // descriptionId: getTrad('form.attribute.component.option.single.description'),
}, // value: false,
], // },
validations: {}, // ],
// validations: {},
}, },
], ],
}, },
@ -68,44 +71,55 @@ const baseForm = {
items: [ items: [
nameField, nameField,
{ {
label: { intlLabel: {
id: getTrad('modalForm.attribute.text.type-selection'), id: getTrad('modalForm.attribute.text.type-selection'),
defaultMessage: 'Type',
}, },
name: 'type', name: 'type',
type: 'select', type: 'select',
options: [ options: [
{ id: 'components.InputSelect.option.placeholder', value: '' },
{ {
id: 'form.attribute.item.date.type.date', key: '__null_reset_value__',
value: '',
metadatas: {
intlLabel: {
id: 'components.InputSelect.option.placeholder',
defaultMessage: 'Choose here',
},
hidden: true,
},
},
{
key: 'date',
value: 'date', value: 'date',
metadatas: {
intlLabel: {
id: getTrad('form.attribute.item.date.type.date'),
defaultMessage: 'date',
},
},
}, },
{ {
id: 'form.attribute.item.date.type.datetime', key: 'datetime',
value: 'datetime', value: 'datetime',
metadatas: {
intlLabel: {
id: getTrad('form.attribute.item.date.type.datetime'),
defaultMessage: 'datetime',
},
},
}, },
// Not sure the ctm supports that one {
// { key: 'time',
// id: 'form.attribute.item.date.type.timestamp', value: 'time',
// value: 'timestamp', metadatas: {
// }, intlLabel: {
{ id: 'form.attribute.item.date.type.time', value: 'time' }, id: getTrad('form.attribute.item.date.type.time'),
].map(({ id, value }, index) => { defaultMessage: 'time',
const disabled = index === 0; },
const tradId = index === 0 ? id : getTrad(id); },
},
return ( ],
<FormattedMessage id={tradId} key={id}>
{msg => (
<option disabled={disabled} hidden={disabled} value={value}>
{msg}
</option>
)}
</FormattedMessage>
);
}),
validations: {
required: true,
},
}, },
], ],
}, },
@ -123,11 +137,13 @@ const baseForm = {
name: 'enum', name: 'enum',
type: 'textarea', type: 'textarea',
size: 8, size: 8,
label: { intlLabel: {
id: getTrad('form.attribute.item.enumeration.rules'), id: getTrad('form.attribute.item.enumeration.rules'),
defaultMessage: 'Values (one line per value)',
}, },
placeholder: { placeholder: {
id: getTrad('form.attribute.item.enumeration.placeholder'), id: getTrad('form.attribute.item.enumeration.placeholder'),
defaultMessage: 'Ex:\nmorning\nnoon\nevening',
}, },
validations: { validations: {
required: true, required: true,
@ -146,23 +162,28 @@ const baseForm = {
sectionTitle: null, sectionTitle: null,
items: [ items: [
{ {
label: { id: getTrad('modalForm.attribute.text.type-selection') }, intlLabel: {
id: getTrad('modalForm.attribute.text.type-selection'),
defaultMessage: 'Type',
},
name: 'multiple', name: 'multiple',
size: 12, size: 12,
type: 'booleanBox', type: 'booleanBox',
options: [ // FIXME
{ options: [],
headerId: getTrad('form.attribute.media.option.multiple'), // options: [
descriptionId: getTrad('form.attribute.media.option.multiple.description'), // {
value: true, // headerId: getTrad('form.attribute.media.option.multiple'),
}, // descriptionId: getTrad('form.attribute.media.option.multiple.description'),
{ // value: true,
headerId: getTrad('form.attribute.media.option.single'), // },
descriptionId: getTrad('form.attribute.media.option.single.description'), // {
value: false, // headerId: getTrad('form.attribute.media.option.single'),
}, // descriptionId: getTrad('form.attribute.media.option.single.description'),
], // value: false,
validations: {}, // },
// ],
// validations: {},
}, },
], ],
}, },
@ -177,43 +198,65 @@ const baseForm = {
items: [ items: [
nameField, nameField,
{ {
label: { intlLabel: {
id: getTrad('form.attribute.item.number.type'), id: getTrad('form.attribute.item.number.type'),
defaultMessage: 'Number format',
}, },
name: 'type', name: 'type',
type: 'select', type: 'select',
options: [ options: [
{ id: 'components.InputSelect.option.placeholder', value: '' },
{ {
id: 'form.attribute.item.number.type.integer', key: '__null_reset_value__',
value: '',
metadatas: {
intlLabel: {
id: 'components.InputSelect.option.placeholder',
defaultMessage: 'Choose here',
},
hidden: true,
},
},
{
key: 'integer',
value: 'integer', value: 'integer',
metadatas: {
intlLabel: {
id: getTrad('form.attribute.item.number.type.integer'),
defaultMessage: 'integer (ex: 10)',
},
},
}, },
{ {
id: 'form.attribute.item.number.type.biginteger', key: 'biginteger',
value: 'biginteger', value: 'biginteger',
metadatas: {
intlLabel: {
id: getTrad('form.attribute.item.number.type.biginteger'),
defaultMessage: 'biginteger (ex: 123456789)',
},
},
}, },
{ {
id: 'form.attribute.item.number.type.decimal', key: 'decimal',
value: 'decimal', value: 'decimal',
metadatas: {
intlLabel: {
id: getTrad('form.attribute.item.number.type.decimal'),
defaultMessage: 'decimal (ex: 2.22)',
},
},
}, },
{ id: 'form.attribute.item.number.type.float', value: 'float' }, {
].map(({ id, value }, index) => { key: 'float',
const disabled = index === 0; value: 'float',
const tradId = index === 0 ? id : getTrad(id); metadatas: {
intlLabel: {
return ( id: getTrad('form.attribute.item.number.type.float'),
<FormattedMessage id={tradId} key={id}> defaultMessage: 'decimal (ex: 3.3333333)',
{msg => ( },
<option disabled={disabled} hidden={disabled} value={value}> },
{msg} },
</option> ],
)}
</FormattedMessage>
);
}),
validations: {
required: true,
},
}, },
], ],
}, },
@ -227,6 +270,8 @@ const baseForm = {
sectionTitle: null, sectionTitle: null,
items: [ items: [
{ {
intlLabel: { id: 'FIXME', defaultMessage: 'FIXME' },
name: 'relation',
type: 'relation', type: 'relation',
}, },
], ],
@ -242,23 +287,28 @@ const baseForm = {
sectionTitle: null, sectionTitle: null,
items: [ items: [
{ {
label: { id: getTrad('modalForm.attribute.text.type-selection') }, intlLabel: {
id: getTrad('modalForm.attribute.text.type-selection'),
defaultMessage: 'Type',
},
name: 'type', name: 'type',
size: 12, size: 12,
type: 'booleanBox', type: 'booleanBox',
options: [ options: [],
{ // FIXME
headerId: getTrad('form.attribute.text.option.short-text'), // options: [
descriptionId: getTrad('form.attribute.text.option.short-text.description'), // {
value: 'string', // headerId: getTrad('form.attribute.text.option.short-text'),
}, // descriptionId: getTrad('form.attribute.text.option.short-text.description'),
{ // value: 'string',
headerId: getTrad('form.attribute.text.option.long-text'), // },
descriptionId: getTrad('form.attribute.text.option.long-text.description'), // {
value: 'text', // headerId: getTrad('form.attribute.text.option.long-text'),
}, // descriptionId: getTrad('form.attribute.text.option.long-text.description'),
], // value: 'text',
validations: {}, // },
// ],
// validations: {},
}, },
], ],
}, },
@ -273,34 +323,44 @@ const baseForm = {
sectionTitle: null, sectionTitle: null,
items: [ items: [
{ {
label: { id: getTrad('modalForm.attribute.text.type-selection') }, intlLabel: {
id: getTrad('modalForm.attribute.text.type-selection'),
defaultMessage: 'Type',
},
name: 'type', name: 'type',
size: 12, size: 12,
type: 'booleanBox', type: 'booleanBox',
options: [ options: [],
{ // FIXME
headerId: getTrad('form.attribute.text.option.short-text'), // options: [
descriptionId: getTrad('form.attribute.text.option.short-text.description'), // {
value: 'string', // headerId: getTrad('form.attribute.text.option.short-text'),
}, // descriptionId: getTrad('form.attribute.text.option.short-text.description'),
{ // value: 'string',
headerId: getTrad('form.attribute.text.option.long-text'), // },
descriptionId: getTrad('form.attribute.text.option.long-text.description'), // {
value: 'text', // headerId: getTrad('form.attribute.text.option.long-text'),
}, // descriptionId: getTrad('form.attribute.text.option.long-text.description'),
], // value: 'text',
validations: {}, // },
// ],
// validations: {},
}, },
], ],
}, },
// [uiHelpers.spacerMedium],
], ],
}; };
}, },
uid: (data, step, attributes) => { uid: (data, step, attributes) => {
const options = attributes const options = attributes
.filter(({ type }) => ['string', 'text'].includes(type)) .filter(({ type }) => ['string', 'text'].includes(type))
.map(({ name }) => ({ id: name, value: name })); .map(({ name }) => ({
key: name,
value: name,
metadatas: {
intlLabel: { id: `${name}.no-override`, defaultMessage: name },
},
}));
return { return {
sections: [ sections: [
@ -311,29 +371,24 @@ const baseForm = {
...nameField, ...nameField,
placeholder: { placeholder: {
id: getTrad('modalForm.attribute.form.base.name.placeholder'), id: getTrad('modalForm.attribute.form.base.name.placeholder'),
defaultMessage: 'e.g. Slug, SEO URL, Canonical URL',
}, },
}, },
{ {
label: { intlLabel: {
id: getTrad('modalForm.attribute.target-field'), id: getTrad('modalForm.attribute.target-field'),
defaultMessage: 'Attached field',
}, },
name: 'targetField', name: 'targetField',
type: 'select', type: 'select',
options: [{ id: getTrad('none'), value: '' }, ...options].map((option, index) => ( options: [
// eslint-disable-next-line react/no-array-index-key {
<Fragment key={index}> key: '__null_reset_value__',
{index === 0 ? ( value: '',
<FormattedMessage id={option.id}> metadatas: { intlLabel: { id: getTrad('none'), defaultMessage: 'None' } },
{msg => <option value={option.value}>{msg}</option>} },
</FormattedMessage> ...options,
) : ( ],
<option value={option.value}>{option.value}</option>
)}
</Fragment>
)),
// validations: {
// required: true,
// },
}, },
], ],
}, },

10
packages/core/content-type-builder/admin/src/components/FormModal/category/form.js
View File

@ -10,15 +10,17 @@ const form = {
autoFocus: true, autoFocus: true,
name: 'name', name: 'name',
type: 'text', type: 'text',
label: { intlLabel: {
id: getTrad('modalForm.attribute.form.base.name'), id: getTrad('modalForm.attribute.form.base.name'),
defaultMessage: 'Name',
}, },
validations: { // validations: {
required: true, // required: true,
}, // },
description: { description: {
id: getTrad('modalForm.editCategory.base.name.description'), id: getTrad('modalForm.editCategory.base.name.description'),
defaultMessage: 'No space is allowed for the name of the category',
}, },
}, },
], ],

31
packages/core/content-type-builder/admin/src/components/FormModal/component/componentField.js
View File

@ -1,25 +1,28 @@
import getTrad from '../../../utils/getTrad'; import getTrad from '../../../utils/getTrad';
const componentField = { const componentField = {
label: { intlLabel: {
id: getTrad('modalForm.attribute.text.type-selection'), id: getTrad('modalForm.attribute.text.type-selection'),
defaultMessage: 'Type',
}, },
name: 'createComponent', name: 'createComponent',
type: 'booleanBox', type: 'booleanBox',
size: 12, size: 12,
options: [ // FIXME
{ options: [],
headerId: getTrad('form.attribute.component.option.create'), // options: [
descriptionId: getTrad('form.attribute.component.option.create.description'), // {
value: true, // headerId: getTrad('form.attribute.component.option.create'),
}, // descriptionId: getTrad('form.attribute.component.option.create.description'),
{ // value: true,
headerId: getTrad('form.attribute.component.option.reuse-existing'), // },
descriptionId: getTrad('form.attribute.component.option.reuse-existing.description'), // {
value: false, // headerId: getTrad('form.attribute.component.option.reuse-existing'),
}, // descriptionId: getTrad('form.attribute.component.option.reuse-existing.description'),
], // value: false,
validations: {}, // },
// ],
// validations: {},
}; };
export default componentField; export default componentField;

16
packages/core/content-type-builder/admin/src/components/FormModal/component/form.js
View File

@ -9,22 +9,17 @@ const componentForm = {
{ {
name: `${prefix}name`, name: `${prefix}name`,
type: 'text', type: 'text',
label: { intlLabel: {
id: getTrad('modalForm.attribute.form.base.name'), id: getTrad('modalForm.attribute.form.base.name'),
}, defaultMessage: 'Name',
validations: {
required: true,
}, },
}, },
{ {
name: `${prefix}category`, name: `${prefix}category`,
type: 'creatableSelect', type: 'creatableSelect',
label: { intlLabel: {
id: getTrad('modalForm.components.create-component.category.label'), id: getTrad('modalForm.components.create-component.category.label'),
}, defaultMessage: 'Select a category or enter a name to create a new one',
validations: {
required: true,
}, },
}, },
], ],
@ -36,8 +31,9 @@ const componentForm = {
name: `${prefix}icon`, name: `${prefix}icon`,
type: 'componentIconPicker', type: 'componentIconPicker',
size: 12, size: 12,
label: { intlLabel: {
id: getTrad('modalForm.components.icon.label'), id: getTrad('modalForm.components.icon.label'),
defaultMessage: 'Icon',
}, },
}, },
], ],

8
packages/core/content-type-builder/admin/src/components/FormModal/contentType/form.js
View File

@ -7,9 +7,6 @@ const nameField = {
id: getTrad('contentType.displayName.label'), id: getTrad('contentType.displayName.label'),
defaultMessage: 'Display name', defaultMessage: 'Display name',
}, },
// validations: {
// required: true,
// },
}; };
const forms = { const forms = {
@ -17,11 +14,6 @@ const forms = {
default: () => { default: () => {
return { return {
sections: [ sections: [
// [
// {
// type: 'dividerDraftPublish',
// },
// ],
{ {
sectionTitle: { sectionTitle: {
id: getTrad('form.contentType.divider.draft-publish'), id: getTrad('form.contentType.divider.draft-publish'),

5
packages/core/content-type-builder/admin/src/components/FormModal/dynamicZone/form.js
View File

@ -25,13 +25,14 @@ const form = {
{ {
sectionTitle: null, sectionTitle: null,
items: [ items: [
// TODO // FIXME
{ type: 'pushRight', size: 6 }, { type: 'pushRight', size: 6 },
{ {
name: 'components', name: 'components',
type: 'componentSelect', type: 'componentSelect',
label: { intlLabel: {
id: getTrad('modalForm.attributes.select-components'), id: getTrad('modalForm.attributes.select-components'),
defaultMessage: 'Select the components',
}, },
isMultiple: true, isMultiple: true,
}, },

38
packages/core/content-type-builder/admin/src/components/FormModal/forms/index.js
View File

@ -1,6 +1,7 @@
import get from 'lodash/get'; import get from 'lodash/get';
import toLower from 'lodash/toLower'; import toLower from 'lodash/toLower';
import { nameToSlug } from '../utils/createUid'; import { nameToSlug } from '../utils/createUid';
import getTrad from '../../../utils/getTrad';
import { attributesForm, attributeTypes, commonBaseForm } from '../attributes'; import { attributesForm, attributeTypes, commonBaseForm } from '../attributes';
import { categoryForm, createCategorySchema } from '../category'; import { categoryForm, createCategorySchema } from '../category';
import { contentTypeForm, createContentTypeSchema } from '../contentType'; import { contentTypeForm, createContentTypeSchema } from '../contentType';
@ -51,13 +52,32 @@ const forms = {
advanced({ data, type, step, extensions, ...rest }) { advanced({ data, type, step, extensions, ...rest }) {
try { try {
const baseForm = attributesForm.advanced[type](data, step).sections; const baseForm = attributesForm.advanced[type](data, step).sections;
const itemsToAdd = extensions.getAdvancedForm(['attribute', type], {
return extensions.makeAdvancedForm(['attribute', type], baseForm, {
data, data,
type, type,
step, step,
...rest, ...rest,
}); });
const sections = baseForm.reduce((acc, current) => {
if (current.sectionTitle === null) {
acc.push(current);
} else {
acc.push({ ...current, items: [...current.items, ...itemsToAdd] });
}
return acc;
}, []);
// IF we want a dedicated section for the plugins
// const sections = [
// ...baseForm,
// {
// sectionTitle: { id: 'Zone pour plugins', defaultMessage: 'Zone pour plugins' },
// items: itemsToAdd,
// },
// ];
return { sections };
} catch (err) { } catch (err) {
console.error(err); console.error(err);
@ -100,8 +120,20 @@ const forms = {
}, },
advanced({ extensions }) { advanced({ extensions }) {
const baseForm = contentTypeForm.advanced.default().sections; const baseForm = contentTypeForm.advanced.default().sections;
const itemsToAdd = extensions.getAdvancedForm(['contentType']);
return extensions.makeAdvancedForm(['contentType'], baseForm); return {
sections: [
...baseForm,
{
sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: itemsToAdd,
},
],
};
}, },
}, },
}, },

21
packages/core/content-type-builder/admin/src/components/FormModal/index.js
View File

@ -21,9 +21,10 @@ import upperFirst from 'lodash/upperFirst';
import toString from 'lodash/toString'; import toString from 'lodash/toString';
import { useSelector, useDispatch, shallowEqual } from 'react-redux'; import { useSelector, useDispatch, shallowEqual } from 'react-redux';
import { Box } from '@strapi/parts/Box'; import { Box } from '@strapi/parts/Box';
import { Button } from '@strapi/parts/Button';
import { Divider } from '@strapi/parts/Divider'; import { Divider } from '@strapi/parts/Divider';
import { Grid, GridItem } from '@strapi/parts/Grid'; import { Grid, GridItem } from '@strapi/parts/Grid';
import { ModalLayout, ModalBody } from '@strapi/parts/ModalLayout'; import { ModalLayout, ModalBody, ModalFooter } from '@strapi/parts/ModalLayout';
import { H2, H3 } from '@strapi/parts/Text'; import { H2, H3 } from '@strapi/parts/Text';
import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/parts/Tabs'; import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/parts/Tabs';
import { Row } from '@strapi/parts/Row'; import { Row } from '@strapi/parts/Row';
@ -592,6 +593,7 @@ const FormModal = () => {
'regex', 'regex',
]; ];
// FIXME
// When toggling the draftAndPublish from true to false // When toggling the draftAndPublish from true to false
// We need to display a confirmation box // We need to display a confirmation box
if (name === 'draftAndPublish' && state.actionType === 'edit' && value === false) { if (name === 'draftAndPublish' && state.actionType === 'edit' && value === false) {
@ -626,6 +628,7 @@ const FormModal = () => {
} }
// We store an array for the enum // We store an array for the enum
// FIXME
} else if (name === 'enum') { } else if (name === 'enum') {
val = value.split('\n'); val = value.split('\n');
} else { } else {
@ -1184,7 +1187,6 @@ const FormModal = () => {
// TODO put aria-disabled // TODO put aria-disabled
disabled={shouldDisableAdvancedTab()} disabled={shouldDisableAdvancedTab()}
onClick={() => { onClick={() => {
console.log('click');
setState(prev => ({ setState(prev => ({
...prev, ...prev,
settingType: 'advanced', settingType: 'advanced',
@ -1345,9 +1347,11 @@ const FormModal = () => {
retrievedValue === '' retrievedValue === ''
) { ) {
value = null; value = null;
} else if (input.type === 'checkbox' && !retrievedValue) { }
value = false; // else if (input.type === 'checkbox' && !retrievedValue) {
} else { // value = false;
// }
else {
value = retrievedValue; value = retrievedValue;
} }
@ -1373,6 +1377,13 @@ const FormModal = () => {
</Box> </Box>
</TabGroup> </TabGroup>
</ModalBody> </ModalBody>
<ModalFooter
startActions={
<Button variant="tertiary" onClick={handleClosed}>
{formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}
</Button>
}
/>
</form> </form>
)} )}
</ModalLayout> </ModalLayout>

17
packages/core/content-type-builder/admin/src/utils/formAPI.js
View File

@ -1,7 +1,6 @@
import cloneDeep from 'lodash/cloneDeep'; import cloneDeep from 'lodash/cloneDeep';
import get from 'lodash/get'; import get from 'lodash/get';
import * as yup from 'yup'; import * as yup from 'yup';
import getTrad from './getTrad';
const formsAPI = { const formsAPI = {
components: { components: {
@ -81,7 +80,7 @@ const formsAPI = {
} }
}); });
}, },
makeAdvancedForm(target, initSections, props) { getAdvancedForm(target, props = null) {
const sectionsToAdd = get(this.types, [...target, 'form', 'advanced'], []).reduce( const sectionsToAdd = get(this.types, [...target, 'form', 'advanced'], []).reduce(
(acc, current) => { (acc, current) => {
const sections = current(props); const sections = current(props);
@ -91,19 +90,9 @@ const formsAPI = {
[] []
); );
return { return sectionsToAdd;
sections: [
...initSections,
{
sectionTitle: {
id: getTrad('form.attribute.item.settings.name'),
defaultMessage: 'Settings',
},
items: sectionsToAdd,
},
],
};
}, },
makeValidator(target, initShape, ...args) { makeValidator(target, initShape, ...args) {
const validators = get(this.types, [...target, 'validators'], []); const validators = get(this.types, [...target, 'validators'], []);

63
packages/core/helper-plugin/lib/src/components/GenericInput/GenericInput.stories.mdx Normal file
View File

@ -0,0 +1,63 @@
<!--- GenericInput.stories.mdx --->
import { useState } from 'react';
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { Grid, GridItem } from '@strapi/parts/Grid';
import { HeaderLayout, ContentLayout } from '@strapi/parts/Layout';
import { Main } from '@strapi/parts/Main';
import { Stack } from '@strapi/parts/Stack';
import { Box } from '@strapi/parts/Box';
import set from 'lodash/set';
import GenericInput from './index';
import layout from './storyUtils/layout';
<Meta title="components/GenericInput" component={GenericInput} />
# GenericInput
This is the doc of the `GenericInput` component
## GenericInput
Description...
<Canvas>
<Story name="base">
{() => {
const [state, setState] = useState({
firstname: 'ee',
email: '',
private: null,
});
return (
<ContentLayout>
<Stack size={4}>
{layout.map((row, rowIndex) => {
return (
<Box key={rowIndex}>
<Grid gap={4}>
{row.map(input => {
return (
<GridItem key={input.name} {...input.size}>
<GenericInput
{...input}
value={state[input.name]}
onChange={({ target: { name, value } }) => {
setState(prev => {
return { ...prev, [name]: value };
});
}}
/>
</GridItem>
);
})}
</Grid>
</Box>
);
})}
</Stack>
</ContentLayout>
);
}}
</Story>
</Canvas>

24
packages/core/helper-plugin/lib/src/components/GenericInput/index.js
View File

@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import cloneDeep from 'lodash/cloneDeep'; import cloneDeep from 'lodash/cloneDeep';
import { formatISO } from 'date-fns'; import { formatISO } from 'date-fns';
import { Checkbox } from '@strapi/parts/Checkbox';
import { DatePicker } from '@strapi/parts/DatePicker'; import { DatePicker } from '@strapi/parts/DatePicker';
import { NumberInput } from '@strapi/parts/NumberInput'; import { NumberInput } from '@strapi/parts/NumberInput';
import { Select, Option } from '@strapi/parts/Select'; import { Select, Option } from '@strapi/parts/Select';
@ -106,6 +107,23 @@ const GenericInput = ({
/> />
); );
} }
case 'checkbox': {
return (
<Checkbox
disabled={disabled}
error={errorMessage}
hint={hint}
id={name}
name={name}
onValueChange={value => {
onChange({ target: { name, value } });
}}
value={Boolean(value)}
>
{label}
</Checkbox>
);
}
case 'date': { case 'date': {
return ( return (
<DatePicker <DatePicker
@ -284,7 +302,11 @@ const GenericInput = ({
); );
} }
default: { default: {
return <div>{type} is not supported</div>; return (
<div>
{type} is not supported for {name}
</div>
);
} }
} }
}; };

130
packages/core/helper-plugin/lib/src/components/GenericInput/storyUtils/layout.js Normal file
View File

@ -0,0 +1,130 @@
const layout = [
[
{
intlLabel: {
id: 'Auth.form.firstname.label',
defaultMessage: 'First name',
},
name: 'firstname',
placeholder: {
id: 'Auth.form.firstname.placeholder',
defaultMessage: 'e.g. Kai',
},
type: 'text',
size: {
col: 6,
xs: 12,
},
},
],
[
{
intlLabel: {
id: 'Auth.form.email.label',
defaultMessage: 'Email',
},
name: 'email',
placeholder: {
id: 'Auth.form.email.placeholder',
defaultMessage: 'e.g. kai.doe@strapi.io',
},
type: 'email',
size: {
col: 6,
xs: 12,
},
},
{
intlLabel: {
id: 'Auth.form.username.label',
defaultMessage: 'Username',
},
name: 'username',
placeholder: {
id: 'Auth.form.username.placeholder',
defaultMessage: 'e.g. Kai_Doe',
},
type: 'text',
size: {
col: 6,
xs: 12,
},
},
],
[
{
intlLabel: {
id: 'Auth.form.password.label',
defaultMessage: 'Password',
},
name: 'password',
type: 'password',
size: {
col: 6,
xs: 12,
},
},
],
[
{
intlLabel: {
id: 'Auth.form.active.label',
defaultMessage: 'Active',
},
name: 'isActive',
type: 'bool',
size: {
col: 6,
xs: 12,
},
},
{
name: 'private',
type: 'checkbox',
size: {
col: 6,
xs: 12,
},
intlLabel: {
id: 'form.attribute.item.privateField',
defaultMessage: 'Private field',
},
description: {
id: 'form.attribute.item.privateField.description',
defaultMessage: 'This field will not show up in the API response',
},
// validations: {},
},
{
intlLabel: { id: 'meal', defaultMessage: 'meal' },
name: 'meal',
type: 'select',
size: {
col: 6,
xs: 12,
},
options: [
{
key: 'pizza',
value: 'pizza',
metadatas: {
intlLabel: { id: 'pizza-label', defaultMessage: 'Pizzza' },
disabled: false,
hidden: false,
},
},
{
key: 'sandwich',
value: 'sandwich',
metadatas: {
intlLabel: { id: 'sandwich-label', defaultMessage: 'Sandwich' },
disabled: false,
hidden: false,
},
},
],
},
],
];
export default layout;

2
packages/core/upload/admin/src/pages/App/components/tests/ListView.test.js
View File

@ -922,7 +922,7 @@ describe('MediaLibrary / ListView', () => {
</div> </div>
<nav <nav
aria-label="pagination" aria-label="pagination"
class="sc-jLfekY" class="sc-LwQPJ"
> >
<ul <ul
class="c43 c44" class="c43 c44"

6
packages/plugins/i18n/admin/src/index.js
View File

@ -170,9 +170,13 @@ export default {
name: 'pluginOptions.i18n.localized', name: 'pluginOptions.i18n.localized',
description: { description: {
id: getTrad('plugin.schema.i18n.localized.description-field'), id: getTrad('plugin.schema.i18n.localized.description-field'),
defaultMessage: 'The field can have different values in each locale',
}, },
type: 'checkbox', type: 'checkbox',
label: { id: getTrad('plugin.schema.i18n.localized.label-field') }, intlLabel: {
id: getTrad('plugin.schema.i18n.localized.label-field'),
defaultMessage: 'Enable localization for this field',
},
}, },
]; ];
}, },