@strapi/admin 4.10.1 → 4.10.2

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

@@ -1,9 +1,9 @@
-import React, { useMemo, useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 //  TODO: DS add loader
 import {
   auth,
   LoadingIndicatorPage,
-  AppInfosContext,
+  AppInfoProvider,
   useGuidedTour,
   useNotification,
 } from '@strapi/helper-plugin';
@@ -27,7 +27,6 @@ const strapiVersion = packageJSON.version;
 const AuthenticatedApp = () => {
   const { setGuidedTourVisibility } = useGuidedTour();
   const toggleNotification = useNotification();
-  const setGuidedTourVisibilityRef = useRef(setGuidedTourVisibility);
   const userInfo = auth.getUserInfo();
   const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
   const [userDisplayName, setUserDisplayName] = useState(userName);
@@ -35,7 +34,7 @@ const AuthenticatedApp = () => {
   const { showReleaseNotification } = useConfigurations();
   const [
     { data: appInfos, status },
-    { data: tag_name, isLoading },
+    { data: tagName, isLoading },
     { data: permissions, status: fetchPermissionsStatus, refetch, isFetched, isFetching },
     { data: userRoles },
   ] = useQueries([
@@ -57,20 +56,20 @@ const AuthenticatedApp = () => {
     },
   ]);
 
-  const shouldUpdateStrapi = useMemo(
-    () => checkLatestStrapiVersion(strapiVersion, tag_name),
-    [tag_name]
-  );
+  const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, tagName);
 
+  /**
+   * TODO: does this actually need to be an effect?
+   */
   useEffect(() => {
     if (userRoles) {
       const isUserSuperAdmin = userRoles.find(({ code }) => code === 'strapi-super-admin');
 
       if (isUserSuperAdmin && appInfos?.autoReload) {
-        setGuidedTourVisibilityRef.current(true);
+        setGuidedTourVisibility(true);
       }
     }
-  }, [userRoles, appInfos]);
+  }, [userRoles, appInfos, setGuidedTourVisibility]);
 
   useEffect(() => {
     const getUserId = async () => {
@@ -88,32 +87,28 @@ const AuthenticatedApp = () => {
 
   const shouldShowLoader = isLoading || shouldShowNotDependentQueriesLoader;
 
-  const appInfosValue = useMemo(() => {
-    return {
-      ...appInfos,
-      userId,
-      latestStrapiReleaseTag: tag_name,
-      setUserDisplayName,
-      shouldUpdateStrapi,
-      userDisplayName,
-    };
-  }, [appInfos, tag_name, shouldUpdateStrapi, userDisplayName, userId]);
-
   if (shouldShowLoader) {
     return <LoadingIndicatorPage />;
   }
 
-  // TODO add error state
+  // TODO: add error state
   if (status === 'error') {
     return <div>error...</div>;
   }
 
   return (
-    <AppInfosContext.Provider value={appInfosValue}>
+    <AppInfoProvider
+      {...appInfos}
+      userId={userId}
+      latestStrapiReleaseTag={tagName}
+      setUserDisplayName={setUserDisplayName}
+      shouldUpdateStrapi={shouldUpdateStrapi}
+      userDisplayName={userDisplayName}
+    >
       <RBACProvider permissions={permissions} refetchPermissions={refetch}>
         <PluginsInitializer />
       </RBACProvider>
-    </AppInfosContext.Provider>
+    </AppInfoProvider>
   );
 };
 

package/admin/src/components/DragLayer/DragLayer.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useDragLayer } from 'react-dnd';
+import { Box } from '@strapi/design-system';
+
+function getStyle(initialOffset, currentOffset, mouseOffset) {
+  if (!initialOffset || !currentOffset) {
+    return { display: 'none' };
+  }
+
+  const { x, y } = mouseOffset;
+
+  return {
+    transform: `translate(${x}px, ${y}px)`,
+  };
+}
+
+export function DragLayer({ renderItem }) {
+  const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = useDragLayer(
+    (monitor) => ({
+      item: monitor.getItem(),
+      itemType: monitor.getItemType(),
+      initialOffset: monitor.getInitialSourceClientOffset(),
+      currentOffset: monitor.getSourceClientOffset(),
+      isDragging: monitor.isDragging(),
+      mouseOffset: monitor.getClientOffset(),
+    })
+  );
+
+  if (!isDragging) {
+    return null;
+  }
+
+  return (
+    <Box
+      height="100%"
+      left={0}
+      position="fixed"
+      pointerEvents="none"
+      top={0}
+      zIndex={100}
+      width="100%"
+    >
+      <Box style={getStyle(initialOffset, currentOffset, mouseOffset)}>
+        {renderItem({ type: itemType, item })}
+      </Box>
+    </Box>
+  );
+}
+
+DragLayer.propTypes = {
+  renderItem: PropTypes.func.isRequired,
+};

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

@@ -0,0 +1 @@
+export * from './DragLayer';

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

@@ -18,7 +18,7 @@ import { Write, Exit } from '@strapi/icons';
 import {
   auth,
   usePersistentState,
-  useAppInfos,
+  useAppInfo,
   useTracking,
   getFetchClient,
 } from '@strapi/helper-plugin';
@@ -59,7 +59,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
     logos: { menu },
   } = useConfigurations();
   const [condensed, setCondensed] = usePersistentState('navbar-condensed', false);
-  const { userDisplayName } = useAppInfos();
+  const { userDisplayName } = useAppInfo();
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const { pathname } = useLocation();

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

@@ -1,15 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { QueryClientProvider, QueryClient } from 'react-query';
-import { LibraryProvider, CustomFieldsProvider, StrapiAppProvider } from '@strapi/helper-plugin';
+import {
+  LibraryProvider,
+  CustomFieldsProvider,
+  StrapiAppProvider,
+  AutoReloadOverlayBlockerProvider,
+  OverlayBlockerProvider,
+  NotificationsProvider,
+} from '@strapi/helper-plugin';
 import { Provider } from 'react-redux';
 import { AdminContext } from '../../contexts';
 import ConfigurationsProvider from '../ConfigurationsProvider';
 import LanguageProvider from '../LanguageProvider';
 import GuidedTour from '../GuidedTour';
-import AutoReloadOverlayBlockerProvider from '../AutoReloadOverlayBlockerProvider';
-import Notifications from '../Notifications';
-import OverlayBlocker from '../OverlayBlocker';
 import ThemeToggleProvider from '../ThemeToggleProvider';
 import Theme from '../Theme';
 
@@ -68,11 +72,11 @@ const Providers = ({
                     <CustomFieldsProvider customFields={customFields}>
                       <LanguageProvider messages={messages} localeNames={localeNames}>
                         <AutoReloadOverlayBlockerProvider>
-                          <OverlayBlocker>
+                          <OverlayBlockerProvider>
                             <GuidedTour>
-                              <Notifications>{children}</Notifications>
+                              <NotificationsProvider>{children}</NotificationsProvider>
                             </GuidedTour>
-                          </OverlayBlocker>
+                          </OverlayBlockerProvider>
                         </AutoReloadOverlayBlockerProvider>
                       </LanguageProvider>
                     </CustomFieldsProvider>

package/admin/src/content-manager/contexts/index.js

@@ -1,3 +1,2 @@
 export { default as ContentTypeLayoutContext } from './ContentTypeLayout';
-export { default as LayoutDndContext } from './LayoutDnd';
 export { default as WysiwygContext } from './Wysiwyg';

package/admin/src/content-manager/hooks/index.js

@@ -1,7 +1,6 @@
 export { default as useContentTypeLayout } from './useContentTypeLayout';
 export { default as useFetchContentTypeLayout } from './useFetchContentTypeLayout';
 export { default as useFindRedirectionLink } from './useFindRedirectionLink';
-export { default as useLayoutDnd } from './useLayoutDnd';
 export { default as usePluginsQueryParams } from './usePluginsQueryParams';
 export { default as useSyncRbac } from './useSyncRbac';
 export { default as useWysiwyg } from './useWysiwyg';

package/admin/src/content-manager/hooks/useLazyComponents/index.js

@@ -38,11 +38,15 @@ const useLazyComponents = (componentUids = []) => {
     if (newUids.length > 0) {
       setLoading(true);
 
-      const componentPromises = newUids.map((uid) => {
+      const componentPromises = newUids.reduce((arrayOfPromises, uid) => {
         const customField = customFieldsRegistry.get(uid);
 
-        return customField.components.Input();
-      });
+        if (customField) {
+          arrayOfPromises.push(customField.components.Input());
+        }
+
+        return arrayOfPromises;
+      }, []);
 
       if (componentPromises.length > 0) {
         lazyLoadComponents(newUids, componentPromises);

package/admin/src/content-manager/hooks/useRelation/useRelation.js

@@ -1,12 +1,10 @@
 import { useState, useEffect } from 'react';
 import { useInfiniteQuery } from 'react-query';
 
-import { useFetchClient } from '@strapi/helper-plugin';
+import { useFetchClient, useCallbackRef } from '@strapi/helper-plugin';
 
 import { normalizeRelations } from '../../components/RelationInputDataManager/utils';
 
-import { useCallbackRef } from '../useCallbackRef';
-
 export const useRelation = (cacheKey, { relation, search }) => {
   const [searchParams, setSearchParams] = useState({});
   const [currentPage, setCurrentPage] = useState(0);

package/admin/src/content-manager/pages/{ListSettingsView/components/CardPreview.js → App/components/CardDragPreview.js}

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Flex, Typography } from '@strapi/design-system';
 import { Pencil, Cross, Drag } from '@strapi/icons';
-import ellipsisCardTitle from '../utils/ellipsisCardTitle';
+import { pxToRem } from '@strapi/helper-plugin';
 
 const ActionBox = styled(Flex)`
   height: ${({ theme }) => theme.spaces[7]};
@@ -14,9 +14,8 @@ const ActionBox = styled(Flex)`
 `;
 
 const DragButton = styled(ActionBox)`
-  padding: 0 ${({ theme }) => theme.spaces[3]};
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
-  cursor: all-scroll;
+  border-right: 1px solid
+    ${({ theme, isSibling }) => (isSibling ? theme.colors.neutral150 : theme.colors.primary200)};
 
   svg {
     width: ${12 / 16}rem;
@@ -25,11 +24,6 @@ const DragButton = styled(ActionBox)`
 `;
 
 const FieldContainer = styled(Flex)`
-  display: inline-flex;
-  max-height: ${32 / 16}rem;
-  opacity: ${({ transparent }) => (transparent ? 0 : 1)};
-  background-color: ${({ theme, isSibling }) =>
-    isSibling ? theme.colors.neutral100 : theme.colors.primary100};
   border: 1px solid
     ${({ theme, isSibling }) => (isSibling ? theme.colors.neutral150 : theme.colors.primary200)};
 
@@ -41,54 +35,60 @@ const FieldContainer = styled(Flex)`
       fill: ${({ theme, isSibling }) => (isSibling ? undefined : theme.colors.primary600)};
     }
   }
-
-  ${Typography} {
-    color: ${({ theme, isSibling }) => (isSibling ? undefined : theme.colors.primary600)};
-  }
-
-  ${DragButton} {
-    border-right: 1px solid
-      ${({ theme, isSibling }) => (isSibling ? theme.colors.neutral150 : theme.colors.primary200)};
-  }
 `;
 
-const CardPreview = ({ labelField, transparent, isSibling }) => {
-  const cardEllipsisTitle = ellipsisCardTitle(labelField);
+const TypographyMaxWidth = styled(Typography)`
+  max-width: ${72 / 16}rem;
+`;
 
+export function CardDragPreview({ labelField, transparent, isSibling }) {
   return (
     <FieldContainer
+      background={isSibling ? 'neutral100' : 'primary100'}
+      display="inline-flex"
+      gap={3}
       hasRadius
       justifyContent="space-between"
       transparent={transparent}
       isSibling={isSibling}
+      max-height={pxToRem(32)}
+      maxWidth="min-content"
+      opacity={transparent ? 0 : 1}
     >
       <Flex gap={3}>
-        <DragButton alignItems="center">
+        <DragButton alignItems="center" cursor="all-scroll" padding={3}>
           <Drag />
         </DragButton>
-        <Typography fontWeight="bold">{cardEllipsisTitle}</Typography>
+
+        <TypographyMaxWidth
+          textColor={isSibling ? undefined : 'primary600'}
+          fontWeight="bold"
+          ellipsis
+        >
+          {labelField}
+        </TypographyMaxWidth>
       </Flex>
-      <Flex paddingLeft={3}>
+
+      <Flex>
         <ActionBox alignItems="center">
           <Pencil />
         </ActionBox>
+
         <ActionBox alignItems="center">
           <Cross />
         </ActionBox>
       </Flex>
     </FieldContainer>
   );
-};
+}
 
-CardPreview.defaultProps = {
+CardDragPreview.defaultProps = {
   isSibling: false,
   transparent: false,
 };
 
-CardPreview.propTypes = {
+CardDragPreview.propTypes = {
   isSibling: PropTypes.bool,
   labelField: PropTypes.string.isRequired,
   transparent: PropTypes.bool,
 };
-
-export default CardPreview;

package/admin/src/content-manager/pages/App/components/ComponentDragPreview.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { pxToRem } from '@strapi/helper-plugin';
+import { Flex, Typography, IconButton } from '@strapi/design-system';
+import { Trash, Drag, CarretDown } from '@strapi/icons';
+
+const DropdownIconWrapper = styled(Flex)`
+  border-radius: 50%;
+
+  svg {
+    height: ${6 / 16}rem;
+    width: ${11 / 16}rem;
+    > path {
+      fill: ${({ theme }) => theme.colors.neutral600};
+    }
+  }
+`;
+
+// TODO: we shouldn't have to reset a whole button
+const ToggleButton = styled.button`
+  border: none;
+  background: transparent;
+  display: block;
+  width: 100%;
+  text-align: unset;
+  padding: 0;
+`;
+
+export function ComponentDragPreview({ displayedValue }) {
+  return (
+    <Flex
+      background="neutral0"
+      borderColor="neutral200"
+      justifyContent="space-between"
+      gap={3}
+      padding={3}
+      width={pxToRem(300)}
+    >
+      <ToggleButton type="button">
+        <Flex gap={6}>
+          <DropdownIconWrapper
+            alignItems="center"
+            justifyContent="center"
+            background="neutral200"
+            height={pxToRem(32)}
+            width={pxToRem(32)}
+          >
+            <CarretDown />
+          </DropdownIconWrapper>
+
+          <Flex maxWidth={pxToRem(150)}>
+            <Typography textColor="neutral700" ellipsis>
+              {displayedValue}
+            </Typography>
+          </Flex>
+        </Flex>
+      </ToggleButton>
+
+      <Flex gap={2}>
+        <IconButton noBorder>
+          <Trash />
+        </IconButton>
+
+        <IconButton noBorder>
+          <Drag />
+        </IconButton>
+      </Flex>
+    </Flex>
+  );
+}
+
+ComponentDragPreview.propTypes = {
+  displayedValue: PropTypes.string.isRequired,
+};

package/admin/src/content-manager/{components/DragLayer → pages/App/components}/RelationDragPreview.js

@@ -4,10 +4,13 @@ import PropTypes from 'prop-types';
 import { Box, Flex, IconButton, Typography, Status, Icon } from '@strapi/design-system';
 import { Drag, Cross } from '@strapi/icons';
 
-import { getTrad } from '../../utils';
-import { PUBLICATION_STATES } from '../RelationInputDataManager/constants';
-import { ChildrenWrapper, FlexWrapper } from '../RelationInput/components/RelationItem';
-import { LinkEllipsis, DisconnectButton } from '../RelationInput';
+import { getTrad } from '../../../utils';
+import { PUBLICATION_STATES } from '../../../components/RelationInputDataManager/constants';
+import {
+  ChildrenWrapper,
+  FlexWrapper,
+} from '../../../components/RelationInput/components/RelationItem';
+import { LinkEllipsis, DisconnectButton } from '../../../components/RelationInput';
 
 export const RelationDragPreview = ({ status, displayedValue, width }) => {
   const { formatMessage } = useIntl();

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

@@ -12,7 +12,7 @@ import { useIntl } from 'react-intl';
 import sortBy from 'lodash/sortBy';
 import permissions from '../../../permissions';
 import getTrad from '../../utils/getTrad';
-import DragLayer from '../../components/DragLayer';
+import { DragLayer } from '../../../components/DragLayer';
 import ModelsContext from '../../contexts/ModelsContext';
 import CollectionTypeRecursivePath from '../CollectionTypeRecursivePath';
 import ComponentSettingsView from '../ComponentSetttingsView';
@@ -22,8 +22,45 @@ import SingleTypeRecursivePath from '../SingleTypeRecursivePath';
 import LeftMenu from './LeftMenu';
 import useContentManagerInitData from './useContentManagerInitData';
 
+import ItemTypes from '../../utils/ItemTypes';
+
+import { CardDragPreview } from './components/CardDragPreview';
+import { ComponentDragPreview } from './components/ComponentDragPreview';
+import { RelationDragPreview } from './components/RelationDragPreview';
+
 const cmPermissions = permissions.contentManager;
 
+function renderDraglayerItem({ type, item }) {
+  if ([ItemTypes.EDIT_FIELD, ItemTypes.FIELD].includes(type)) {
+    return <CardDragPreview labelField={item.labelField} />;
+  }
+
+  /**
+   * Because a user may have multiple relations / dynamic zones / repeable fields in the same content type,
+   * we append the fieldName for the item type to make them unique, however, we then want to extract that
+   * first type to apply the correct preview.
+   */
+  const [actualType] = type.split('_');
+
+  switch (actualType) {
+    case ItemTypes.COMPONENT:
+    case ItemTypes.DYNAMIC_ZONE:
+      return <ComponentDragPreview displayedValue={item.displayedValue} />;
+
+    case ItemTypes.RELATION:
+      return (
+        <RelationDragPreview
+          displayedValue={item.displayedValue}
+          status={item.status}
+          width={item.width}
+        />
+      );
+
+    default:
+      return null;
+  }
+}
+
 const App = () => {
   const contentTypeMatch = useRouteMatch(`/content-manager/:kind/:uid`);
   const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } =
@@ -85,7 +122,7 @@ const App = () => {
 
   return (
     <Layout sideNav={<LeftMenu />}>
-      <DragLayer />
+      <DragLayer renderItem={renderDraglayerItem} />
       <ModelsContext.Provider value={{ refetchData }}>
         <Switch>
           <Route path="/content-manager/components/:uid/configurations/edit">

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

@@ -5,7 +5,7 @@ import { Box, Flex, Typography, Grid, GridItem } from '@strapi/design-system';
 import { Cog } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
-import useLayoutDnd from '../../../hooks/useLayoutDnd';
+import { useLayoutDnd } from '../hooks/useLayoutDnd';
 import getTrad from '../../../utils/getTrad';
 
 const ComponentFieldList = ({ componentUid }) => {

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

@@ -7,7 +7,7 @@ import { Flex, Box, GridItem } from '@strapi/design-system';
 import { Drag } from '@strapi/icons';
 import { ItemTypes } from '../../../utils';
 import FieldButtonContent from './FieldButtonContent';
-import { useLayoutDnd } from '../../../hooks';
+import { useLayoutDnd } from '../hooks/useLayoutDnd';
 
 const Wrapper = styled(Flex)`
   position: relative;

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

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Box, Flex, Typography } from '@strapi/design-system';
 
 import { ComponentIcon } from '../../../components/ComponentIcon';
-import useLayoutDnd from '../../../hooks/useLayoutDnd';
+import { useLayoutDnd } from '../hooks/useLayoutDnd';
 
 const CustomLink = styled(Flex)`
   text-decoration: none;

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

@@ -14,7 +14,7 @@ import {
 } from '@strapi/design-system';
 import styled from 'styled-components';
 import { getTrad } from '../../../utils';
-import { useLayoutDnd } from '../../../hooks';
+import { useLayoutDnd } from '../hooks/useLayoutDnd';
 import FieldTypeIcon from '../../../components/FieldTypeIcon';
 import ModalForm from './ModalForm';
 

package/admin/src/content-manager/{components → pages/EditSettingsView/components}/LayoutDndProvider/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import LayoutDndContext from '../../contexts/LayoutDnd';
 
-function LayoutDndProvider({
+export const LayoutDndContext = React.createContext();
+
+export function LayoutDndProvider({
   attributes,
   buttonData,
   children,
@@ -71,5 +72,3 @@ LayoutDndProvider.propTypes = {
   selectedItemName: PropTypes.string,
   setEditFieldToSelect: PropTypes.func,
 };
-
-export default LayoutDndProvider;

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

@@ -10,7 +10,7 @@ import { useIntl } from 'react-intl';
 import get from 'lodash/get';
 import { Pencil } from '@strapi/icons';
 import getTrad from '../../../utils/getTrad';
-import useLayoutDnd from '../../../hooks/useLayoutDnd';
+import { useLayoutDnd } from '../hooks/useLayoutDnd';
 
 const permissions = [{ action: 'plugin::content-type-builder.read', subject: null }];
 

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

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import { GridItem, Select, Option } from '@strapi/design-system';
 import { useSelector, shallowEqual } from 'react-redux';
 import { useIntl } from 'react-intl';
-import { useLayoutDnd } from '../../../hooks';
+import { useLayoutDnd } from '../hooks/useLayoutDnd';
 import { createPossibleMainFieldsForModelsAndComponents, getInputProps } from '../utils';
 import { makeSelectModelAndComponentSchemas, selectFieldSizes } from '../../App/selectors';
 import getTrad from '../../../utils/getTrad';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import { useLayoutDnd } from '../../../hooks';
+import { useLayoutDnd } from '../hooks/useLayoutDnd';
 import DisplayedFieldButton from './DisplayedFieldButton';
 
 const RowItemsLayout = ({ rowItem, onRemoveField, rowId, rowIndex, index, lastIndex }) => {

package/admin/src/content-manager/pages/EditSettingsView/hooks/useLayoutDnd.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { LayoutDndContext } from '../components/LayoutDndProvider';
+
+export function useLayoutDnd() {
+  return React.useContext(LayoutDndContext);
+}

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

@@ -32,7 +32,7 @@ import reducer, { initialState } from './reducer';
 import init from './init';
 import DisplayedFields from './components/DisplayedFields';
 import ModalForm from './components/FormModal';
-import LayoutDndProvider from '../../components/LayoutDndProvider';
+import { LayoutDndProvider } from './components/LayoutDndProvider';
 import { unformatLayout } from './utils/layout';
 import putCMSettingsEV from './utils/api';
 import { selectFieldSizes } from '../App/selectors';