@strapi/admin 4.9.1 → 4.9.2

package/admin/src/components/LanguageProvider/index.js

@@ -35,7 +35,7 @@ const LanguageProvider = ({ children, localeNames, messages }) => {
 
   return (
     <IntlProvider locale={locale} defaultLocale="en" messages={appMessages} textComponent="span">
-      <LocalesProvider changeLocale={changeLocale} localeNames={localeNames} messages={appMessages}>
+      <LocalesProvider changeLocale={changeLocale} localeNames={localeNames}>
         {children}
       </LocalesProvider>
     </IntlProvider>

package/admin/src/components/LocalesProvider/index.js

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import LocalesProviderContext from './context';
 
-const LocalesProvider = ({ changeLocale, children, localeNames, messages }) => {
+const LocalesProvider = ({ changeLocale, children, localeNames }) => {
   return (
-    <LocalesProviderContext.Provider value={{ changeLocale, localeNames, messages }}>
+    <LocalesProviderContext.Provider value={{ changeLocale, localeNames }}>
       {children}
     </LocalesProviderContext.Provider>
   );
@@ -14,7 +14,6 @@ LocalesProvider.propTypes = {
   changeLocale: PropTypes.func.isRequired,
   children: PropTypes.element.isRequired,
   localeNames: PropTypes.object.isRequired,
-  messages: PropTypes.object.isRequired,
 };
 
 export default LocalesProvider;

package/admin/src/content-manager/components/CollectionTypeFormWrapper/index.js

@@ -222,6 +222,8 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
         trackUsageRef.current('didDeleteEntry', trackerProperty);
 
+        replace(redirectionLink);
+
         return Promise.resolve(data);
       } catch (err) {
         trackUsageRef.current('didNotDeleteEntry', { error: err, ...trackerProperty });
@@ -229,13 +231,9 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         return Promise.reject(err);
       }
     },
-    [id, slug, toggleNotification, del]
+    [id, slug, toggleNotification, del, redirectionLink, replace]
   );
 
-  const onDeleteSucceeded = useCallback(() => {
-    replace(redirectionLink);
-  }, [redirectionLink, replace]);
-
   const onPost = useCallback(
     async (body, trackerProperty) => {
       const endPoint = `${getRequestUrl(`collection-types/${slug}`)}${rawQuery}`;
@@ -409,7 +407,6 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
     isCreatingEntry,
     isLoadingForData: isLoading,
     onDelete,
-    onDeleteSucceeded,
     onPost,
     onPublish,
     onDraftRelationCheck,

package/admin/src/content-manager/components/EditViewDataManagerProvider/reducer.js

@@ -186,11 +186,15 @@ const reducer = (state, action) =>
         const newRelations = [...modifiedDataRelations];
 
         if (action.type === 'REORDER_RELATION') {
-          const [newKey] = generateNKeysBetween(
-            modifiedDataRelations[newIndex - 1]?.__temp_key__,
-            modifiedDataRelations[newIndex]?.__temp_key__,
-            1
-          );
+          const startKey =
+            oldIndex > newIndex
+              ? modifiedDataRelations[newIndex - 1]?.__temp_key__
+              : modifiedDataRelations[newIndex]?.__temp_key__;
+          const endKey =
+            oldIndex > newIndex
+              ? modifiedDataRelations[newIndex]?.__temp_key__
+              : modifiedDataRelations[newIndex + 1]?.__temp_key__;
+          const [newKey] = generateNKeysBetween(startKey, endKey, 1);
 
           newRelations.splice(oldIndex, 1);
           newRelations.splice(newIndex, 0, { ...currentItem, __temp_key__: newKey });

package/admin/src/content-manager/components/InputUID/index.js

@@ -11,7 +11,7 @@ import { Flex, TextInput, Typography } from '@strapi/design-system';
 import { Refresh, CheckCircle, ExclamationMarkCircle, Loader } from '@strapi/icons';
 
 import { getRequestUrl } from '../../utils';
-import useDebounce from './useDebounce';
+import useDebounce from '../../../hooks/useDebounce';
 import UID_REGEX from './regex';
 import { FieldActionWrapper, TextValidation, LoadingWrapper } from './endActionStyle';
 

package/admin/src/content-manager/components/SingleTypeFormWrapper/index.js

@@ -172,6 +172,9 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
         trackUsageRef.current('didDeleteEntry', trackerProperty);
 
+        setIsCreatingEntry(true);
+        dispatch(initForm(rawQuery, true));
+
         return Promise.resolve(data);
       } catch (err) {
         trackUsageRef.current('didNotDeleteEntry', { error: err, ...trackerProperty });
@@ -181,15 +184,9 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         return Promise.reject(err);
       }
     },
-    [del, slug, displayErrors, toggleNotification, searchToSend]
+    [del, slug, displayErrors, toggleNotification, searchToSend, dispatch, rawQuery]
   );
 
-  const onDeleteSucceeded = useCallback(() => {
-    setIsCreatingEntry(true);
-
-    dispatch(initForm(rawQuery, true));
-  }, [dispatch, rawQuery]);
-
   const onPost = useCallback(
     async (body, trackerProperty) => {
       const endPoint = getRequestUrl(`${slug}${rawQuery}`);
@@ -370,7 +367,6 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
     isCreatingEntry,
     isLoadingForData: isLoading,
     onDelete,
-    onDeleteSucceeded,
     onPost,
     onDraftRelationCheck,
     onPublish,

package/admin/src/content-manager/pages/App/LeftMenu/index.js

@@ -16,51 +16,72 @@ import {
   SubNavSections,
   SubNavLink,
 } from '@strapi/design-system/v2';
+import { useFilter, useCollator } from '@strapi/helper-plugin';
 
-import { matchByTitle } from './utils';
 import getTrad from '../../../utils/getTrad';
 import { makeSelectModelLinks } from '../selectors';
 
 const LeftMenu = () => {
   const [search, setSearch] = useState('');
-  const { formatMessage } = useIntl();
+  const { formatMessage, locale } = useIntl();
   const modelLinksSelector = useMemo(makeSelectModelLinks, []);
-  const { collectionTypeLinks, singleTypeLinks } = useSelector(
-    (state) => modelLinksSelector(state),
-    shallowEqual
-  );
+  const { collectionTypeLinks, singleTypeLinks } = useSelector(modelLinksSelector, shallowEqual);
 
-  const toIntl = (links) =>
-    links.map((link) => {
-      return {
-        ...link,
-        title: formatMessage({ id: link.title, defaultMessage: link.title }),
-      };
-    });
+  const { startsWith } = useFilter(locale, {
+    sensitivity: 'base',
+  });
 
-  const intlCollectionTypeLinks = toIntl(collectionTypeLinks);
-  const intlSingleTypeLinks = toIntl(singleTypeLinks);
+  /**
+   * @type {Intl.Collator}
+   */
+  const formatter = useCollator(locale, {
+    sensitivity: 'base',
+  });
 
-  const menu = [
-    {
-      id: 'collectionTypes',
-      title: {
-        id: getTrad('components.LeftMenu.collection-types'),
-        defaultMessage: 'Collection Types',
-      },
-      searchable: true,
-      links: matchByTitle(intlCollectionTypeLinks, search),
-    },
-    {
-      id: 'singleTypes',
-      title: {
-        id: getTrad('components.LeftMenu.single-types'),
-        defaultMessage: 'Single Types',
-      },
-      searchable: true,
-      links: matchByTitle(intlSingleTypeLinks, search),
-    },
-  ];
+  const menu = useMemo(
+    () =>
+      [
+        {
+          id: 'collectionTypes',
+          title: {
+            id: getTrad('components.LeftMenu.collection-types'),
+            defaultMessage: 'Collection Types',
+          },
+          searchable: true,
+          links: collectionTypeLinks,
+        },
+        {
+          id: 'singleTypes',
+          title: {
+            id: getTrad('components.LeftMenu.single-types'),
+            defaultMessage: 'Single Types',
+          },
+          searchable: true,
+          links: singleTypeLinks,
+        },
+      ].map((section) => ({
+        ...section,
+        links: section.links
+          /**
+           * Filter by the search value
+           */
+          .filter((link) => startsWith(link.title, search))
+          /**
+           * Sort correctly using the language
+           */
+          .sort((a, b) => formatter.compare(a.title, b.title))
+          /**
+           * Apply the formated strings to the links from react-intl
+           */
+          .map((link) => {
+            return {
+              ...link,
+              title: formatMessage({ id: link.title, defaultMessage: link.title }),
+            };
+          }),
+      })),
+    [collectionTypeLinks, search, singleTypeLinks, startsWith, formatMessage, formatter]
+  );
 
   const handleClear = () => {
     setSearch('');

package/admin/src/content-manager/pages/App/actions.js

@@ -1,12 +1,24 @@
-import { GET_DATA, RESET_PROPS, SET_CONTENT_TYPE_LINKS } from './constants';
+import { GET_INIT_DATA, RESET_INIT_DATA, SET_INIT_DATA } from './constants';
 
-export const getData = () => ({
-  type: GET_DATA,
+export const getInitData = () => ({
+  type: GET_INIT_DATA,
 });
 
-export const resetProps = () => ({ type: RESET_PROPS });
+export const resetInitData = () => ({ type: RESET_INIT_DATA });
 
-export const setContentTypeLinks = (authorizedCtLinks, authorizedStLinks, models, components) => ({
-  type: SET_CONTENT_TYPE_LINKS,
-  data: { authorizedCtLinks, authorizedStLinks, components, contentTypeSchemas: models },
+export const setInitData = ({
+  authorizedCollectionTypeLinks,
+  authorizedSingleTypeLinks,
+  contentTypeSchemas,
+  components,
+  fieldSizes,
+}) => ({
+  type: SET_INIT_DATA,
+  data: {
+    authorizedCollectionTypeLinks,
+    authorizedSingleTypeLinks,
+    components,
+    contentTypeSchemas,
+    fieldSizes,
+  },
 });

package/admin/src/content-manager/pages/App/constants.js

@@ -1,3 +1,3 @@
-export const GET_DATA = 'ContentManager/App/GET_DATA';
-export const RESET_PROPS = 'ContentManager/App/RESET_PROPS';
-export const SET_CONTENT_TYPE_LINKS = 'ContentManager/App/SET_CONTENT_TYPE_LINKS';
+export const GET_INIT_DATA = 'ContentManager/App/GET_INIT_DATA';
+export const RESET_INIT_DATA = 'ContentManager/App/RESET_INIT_DATA';
+export const SET_INIT_DATA = 'ContentManager/App/SET_INIT_DATA';

package/admin/src/content-manager/pages/App/index.js

@@ -20,13 +20,14 @@ import NoContentType from '../NoContentType';
 import NoPermissions from '../NoPermissions';
 import SingleTypeRecursivePath from '../SingleTypeRecursivePath';
 import LeftMenu from './LeftMenu';
-import useModels from './useModels';
+import useContentManagerInitData from './useContentManagerInitData';
 
 const cmPermissions = permissions.contentManager;
 
 const App = () => {
   const contentTypeMatch = useRouteMatch(`/content-manager/:kind/:uid`);
-  const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } = useModels();
+  const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } =
+    useContentManagerInitData();
   const authorisedModels = sortBy([...collectionTypeLinks, ...singleTypeLinks], (model) =>
     model.title.toLowerCase()
   );

package/admin/src/content-manager/pages/App/reducer.js

@@ -4,7 +4,7 @@
  */
 /* eslint-disable consistent-return */
 import produce from 'immer';
-import { GET_DATA, RESET_PROPS, SET_CONTENT_TYPE_LINKS } from './constants';
+import { GET_INIT_DATA, RESET_INIT_DATA, SET_INIT_DATA } from './constants';
 
 const initialState = {
   components: [],
@@ -20,22 +20,23 @@ const initialState = {
 const mainReducer = (state = initialState, action) =>
   produce(state, (draftState) => {
     switch (action.type) {
-      case GET_DATA: {
+      case GET_INIT_DATA: {
         draftState.status = 'loading';
         break;
       }
-      case RESET_PROPS: {
+      case RESET_INIT_DATA: {
         return initialState;
       }
-      case SET_CONTENT_TYPE_LINKS: {
-        draftState.collectionTypeLinks = action.data.authorizedCtLinks.filter(
+      case SET_INIT_DATA: {
+        draftState.collectionTypeLinks = action.data.authorizedCollectionTypeLinks.filter(
           ({ isDisplayed }) => isDisplayed
         );
-        draftState.singleTypeLinks = action.data.authorizedStLinks.filter(
+        draftState.singleTypeLinks = action.data.authorizedSingleTypeLinks.filter(
           ({ isDisplayed }) => isDisplayed
         );
         draftState.components = action.data.components;
         draftState.models = action.data.contentTypeSchemas;
+        draftState.fieldSizes = action.data.fieldSizes;
         draftState.status = 'resolved';
         break;
       }

package/admin/src/content-manager/pages/App/selectors.js

@@ -23,10 +23,13 @@ const makeSelectModelAndComponentSchemas = () =>
     schemas: [...components, ...models],
   }));
 
+const selectFieldSizes = createSelector(selectAppDomain(), (state) => state.fieldSizes);
+
 export default makeSelectApp;
 export {
   makeSelectModelAndComponentSchemas,
   makeSelectModelLinks,
   makeSelectModels,
+  selectFieldSizes,
   selectAppDomain,
 };

package/admin/src/content-manager/pages/App/{useModels.js → useContentManagerInitData.js}

@@ -11,11 +11,11 @@ import axios from 'axios';
 import { useIntl } from 'react-intl';
 import { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } from '../../../exposedHooks';
 import { getRequestUrl, getTrad } from '../../utils';
-import { getData, resetProps, setContentTypeLinks } from './actions';
+import { getInitData, resetInitData, setInitData } from './actions';
 import { selectAppDomain } from './selectors';
 import getContentTypeLinks from './utils/getContentTypeLinks';
 
-const useModels = () => {
+const useContentManagerInitData = () => {
   const dispatch = useDispatch();
   const toggleNotification = useNotification();
   const state = useSelector(selectAppDomain());
@@ -29,22 +29,14 @@ const useModels = () => {
   const { get } = useFetchClient();
 
   const fetchData = async () => {
-    dispatch(getData());
+    dispatch(getInitData());
 
     try {
-      const [
-        {
-          data: { data: components },
-        },
-        {
-          data: { data: models },
+      const {
+        data: {
+          data: { components, contentTypes: models, fieldSizes },
         },
-      ] = await Promise.all(
-        ['components', 'content-types'].map((endPoint) =>
-          get(getRequestUrl(endPoint), { cancelToken: source.token })
-        )
-      );
-
+      } = await get(getRequestUrl('init'), { cancelToken: source.token });
       notifyStatus(
         formatMessage({
           id: getTrad('App.schemas.data-loaded'),
@@ -52,22 +44,31 @@ const useModels = () => {
         })
       );
 
-      const { authorizedCtLinks, authorizedStLinks } = await getContentTypeLinks(
-        models,
-        allPermissions,
-        toggleNotification
-      );
-
-      const { ctLinks } = runHookWaterfall(MUTATE_COLLECTION_TYPES_LINKS, {
-        ctLinks: authorizedCtLinks,
+      const unmutatedContentTypeLinks = await getContentTypeLinks({
         models,
+        userPermissions: allPermissions,
+        toggleNotification,
       });
-      const { stLinks } = runHookWaterfall(MUTATE_SINGLE_TYPES_LINKS, {
-        stLinks: authorizedStLinks,
+
+      const { ctLinks: authorizedCollectionTypeLinks } = runHookWaterfall(
+        MUTATE_COLLECTION_TYPES_LINKS,
+        {
+          ctLinks: unmutatedContentTypeLinks.authorizedCollectionTypeLinks,
+          models,
+        }
+      );
+      const { stLinks: authorizedSingleTypeLinks } = runHookWaterfall(MUTATE_SINGLE_TYPES_LINKS, {
+        stLinks: unmutatedContentTypeLinks.authorizedSingleTypeLinks,
         models,
       });
 
-      const actionToDispatch = setContentTypeLinks(ctLinks, stLinks, models, components);
+      const actionToDispatch = setInitData({
+        authorizedCollectionTypeLinks,
+        authorizedSingleTypeLinks,
+        contentTypeSchemas: models,
+        components,
+        fieldSizes,
+      });
 
       dispatch(actionToDispatch);
     } catch (err) {
@@ -88,7 +89,7 @@ const useModels = () => {
 
     return () => {
       source.cancel('Operation canceled by the user.');
-      dispatch(resetProps());
+      dispatch(resetInitData());
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, toggleNotification]);
@@ -96,4 +97,4 @@ const useModels = () => {
   return { ...state, refetchData: fetchDataRef.current };
 };
 
-export default useModels;
+export default useContentManagerInitData;

package/admin/src/content-manager/pages/App/utils/generateModelsLinks.js

@@ -52,12 +52,12 @@ const generateModelsLinks = (models, modelsConfigurations) => {
   const [collectionTypes, singleTypes] = sortBy(groupedModels, 'name');
 
   return {
-    collectionTypesSectionLinks: generateLinks(
+    collectionTypeSectionLinks: generateLinks(
       collectionTypes?.links || [],
       'collectionTypes',
       modelsConfigurations
     ),
-    singleTypesSectionLinks: generateLinks(singleTypes?.links ?? [], 'singleTypes'),
+    singleTypeSectionLinks: generateLinks(singleTypes?.links ?? [], 'singleTypes'),
   };
 };
 

package/admin/src/content-manager/pages/App/utils/getContentTypeLinks.js

@@ -3,36 +3,38 @@ import generateModelsLinks from './generateModelsLinks';
 import checkPermissions from './checkPermissions';
 import { getRequestUrl } from '../../../utils';
 
-const getContentTypeLinks = async (models, userPermissions, toggleNotification) => {
+const getContentTypeLinks = async ({ models, userPermissions, toggleNotification }) => {
   const { get } = getFetchClient();
   try {
     const {
       data: { data: contentTypeConfigurations },
     } = await get(getRequestUrl('content-types-settings'));
 
-    const { collectionTypesSectionLinks, singleTypesSectionLinks } = generateModelsLinks(
+    const { collectionTypeSectionLinks, singleTypeSectionLinks } = generateModelsLinks(
       models,
       contentTypeConfigurations
     );
 
-    // Content Types verifications
-    const ctLinksPermissionsPromises = checkPermissions(
-      userPermissions,
-      collectionTypesSectionLinks
+    // Collection Types verifications
+    const collectionTypeLinksPermissions = await Promise.all(
+      checkPermissions(userPermissions, collectionTypeSectionLinks)
     );
-    const ctLinksPermissions = await Promise.all(ctLinksPermissionsPromises);
-    const authorizedCtLinks = collectionTypesSectionLinks.filter(
-      (_, index) => ctLinksPermissions[index]
+    const authorizedCollectionTypeLinks = collectionTypeSectionLinks.filter(
+      (_, index) => collectionTypeLinksPermissions[index]
     );
 
     // Single Types verifications
-    const stLinksPermissionsPromises = checkPermissions(userPermissions, singleTypesSectionLinks);
-    const stLinksPermissions = await Promise.all(stLinksPermissionsPromises);
-    const authorizedStLinks = singleTypesSectionLinks.filter(
-      (_, index) => stLinksPermissions[index]
+    const singleTypeLinksPermissions = await Promise.all(
+      checkPermissions(userPermissions, singleTypeSectionLinks)
+    );
+    const authorizedSingleTypeLinks = singleTypeSectionLinks.filter(
+      (_, index) => singleTypeLinksPermissions[index]
     );
 
-    return { authorizedCtLinks, authorizedStLinks };
+    return {
+      authorizedCollectionTypeLinks,
+      authorizedSingleTypeLinks,
+    };
   } catch (err) {
     console.error(err);
 
@@ -41,7 +43,7 @@ const getContentTypeLinks = async (models, userPermissions, toggleNotification)
       message: { id: 'notification.error' },
     });
 
-    return { authorizedCtLinks: [], authorizedStLinks: [], contentTypes: [] };
+    return { authorizedCollectionTypeLinks: [], authorizedSingleTypeLinks: [] };
   }
 };
 

package/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js

@@ -6,7 +6,7 @@ import { useSelector, shallowEqual } from 'react-redux';
 import { useIntl } from 'react-intl';
 import { useLayoutDnd } from '../../../hooks';
 import { createPossibleMainFieldsForModelsAndComponents, getInputProps } from '../utils';
-import { makeSelectModelAndComponentSchemas } from '../../App/selectors';
+import { makeSelectModelAndComponentSchemas, selectFieldSizes } from '../../App/selectors';
 import getTrad from '../../../utils/getTrad';
 import GenericInput from './GenericInput';
 
@@ -17,8 +17,6 @@ const FIELD_SIZES = [
   [12, '100%'],
 ];
 
-const NON_RESIZABLE_FIELD_TYPES = ['dynamiczone', 'component', 'json', 'richtext'];
-
 const TIME_FIELD_OPTIONS = [1, 5, 10, 15, 30, 60];
 
 const TIME_FIELD_TYPES = ['datetime', 'time'];
@@ -28,6 +26,7 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
   const { modifiedData, selectedField, attributes, fieldForm } = useLayoutDnd();
   const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);
   const { schemas } = useSelector((state) => schemasSelector(state), shallowEqual);
+  const fieldSizes = useSelector(selectFieldSizes);
 
   const formToDisplay = useMemo(() => {
     if (!selectedField) {
@@ -103,7 +102,7 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
     );
   });
 
-  const canResize = !NON_RESIZABLE_FIELD_TYPES.includes(attributes[selectedField].type);
+  const { isResizable } = fieldSizes[attributes[selectedField].type];
 
   const sizeField = (
     <GridItem col={6} key="size">
@@ -152,7 +151,7 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
   return (
     <>
       {metaFields}
-      {canResize && sizeField}
+      {isResizable && sizeField}
       {hasTimePicker && timeStepField}
     </>
   );

package/admin/src/content-manager/pages/EditSettingsView/index.js

@@ -26,6 +26,7 @@ import {
   Divider,
 } from '@strapi/design-system';
 import { ArrowLeft, Check } from '@strapi/icons';
+import { useSelector } from 'react-redux';
 import { getTrad } from '../../utils';
 import reducer, { initialState } from './reducer';
 import init from './init';
@@ -34,6 +35,7 @@ import ModalForm from './components/FormModal';
 import LayoutDndProvider from '../../components/LayoutDndProvider';
 import { unformatLayout } from './utils/layout';
 import putCMSettingsEV from './utils/api';
+import { selectFieldSizes } from '../App/selectors';
 
 const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, updateLayout }) => {
   const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
@@ -49,6 +51,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
   const { formatMessage } = useIntl();
   const modelName = get(mainLayout, ['info', 'displayName'], '');
   const attributes = get(modifiedData, ['attributes'], {});
+  const fieldSizes = useSelector(selectFieldSizes);
 
   const entryTitleOptions = Object.keys(attributes).filter((attr) => {
     const type = get(attributes, [attr, 'type'], '');
@@ -318,6 +321,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
                     dispatch({
                       type: 'ON_ADD_FIELD',
                       name: field,
+                      fieldSizes,
                     });
                   }}
                   onRemoveField={(rowId, index) => {

package/admin/src/content-manager/pages/EditSettingsView/reducer.js

@@ -2,9 +2,10 @@ import produce from 'immer';
 import set from 'lodash/set';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
-
 import { arrayMoveItem } from '../../utils';
-import { formatLayout, getDefaultInputSize, getFieldSize, setFieldSize } from './utils/layout';
+import { formatLayout, getFieldSize, setFieldSize } from './utils/layout';
+
+const DEFAULT_FIELD_SIZE = 6;
 
 const initialState = {
   fieldForm: {},
@@ -29,9 +30,8 @@ const reducer = (state = initialState, action) =>
       }
       case 'ON_ADD_FIELD': {
         const newState = cloneDeep(state);
-        const size = getDefaultInputSize(
-          get(newState, ['modifiedData', 'attributes', action.name, 'type'], '')
-        );
+        const type = get(newState, ['modifiedData', 'attributes', action.name, 'type'], '');
+        const size = action.fieldSizes[type]?.default ?? DEFAULT_FIELD_SIZE;
         const listSize = get(newState, layoutPathEdit, []).length;
         const actualRowContentPath = [...layoutPathEdit, listSize - 1, 'rowContent'];
         const rowContentToSet = get(newState, actualRowContentPath, []);
@@ -149,8 +149,7 @@ const reducer = (state = initialState, action) =>
         draftState.metaToEdit = action.name;
         draftState.metaForm = {
           metadata: get(state, ['modifiedData', 'metadatas', action.name, 'edit'], {}),
-          size:
-            getFieldSize(action.name, state.modifiedData?.layouts?.edit) ?? getDefaultInputSize(),
+          size: getFieldSize(action.name, state.modifiedData?.layouts?.edit) ?? DEFAULT_FIELD_SIZE,
         };
 
         break;