@strapi/admin 4.6.0-beta.0 → 4.6.0-beta.2

package/.browserslistrc

@@ -0,0 +1,3 @@
+last 3 major versions
+Firefox ESR
+last 2 Opera versions

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

@@ -20,7 +20,7 @@ import {
   fetchUserRoles,
 } from './utils/api';
 import checkLatestStrapiVersion from './utils/checkLatestStrapiVersion';
-import { getFullName } from '../../utils';
+import { getFullName, hashAdminUserEmail } from '../../utils';
 
 const strapiVersion = packageJSON.version;
 
@@ -31,6 +31,7 @@ const AuthenticatedApp = () => {
   const userInfo = auth.getUserInfo();
   const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
   const [userDisplayName, setUserDisplayName] = useState(userName);
+  const [userId, setUserId] = useState(null);
   const { showReleaseNotification } = useConfigurations();
   const [
     { data: appInfos, status },
@@ -71,6 +72,15 @@ const AuthenticatedApp = () => {
     }
   }, [userRoles, appInfos]);
 
+  useEffect(() => {
+    const getUserId = async () => {
+      const userId = await hashAdminUserEmail(userInfo);
+      setUserId(userId);
+    };
+
+    getUserId();
+  }, [userInfo]);
+
   // We don't need to wait for the release query to be fetched before rendering the plugins
   // however, we need the appInfos and the permissions
   const shouldShowNotDependentQueriesLoader =
@@ -81,12 +91,13 @@ const AuthenticatedApp = () => {
   const appInfosValue = useMemo(() => {
     return {
       ...appInfos,
+      userId,
       latestStrapiReleaseTag: tag_name,
       setUserDisplayName,
       shouldUpdateStrapi,
       userDisplayName,
     };
-  }, [appInfos, tag_name, shouldUpdateStrapi, userDisplayName]);
+  }, [appInfos, tag_name, shouldUpdateStrapi, userDisplayName, userId]);
 
   if (shouldShowLoader) {
     return <LoadingIndicatorPage />;

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

@@ -1,16 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
 
-const loadCss = async () => {
-  await import(/* webpackChunkName: "fontawesome-css" */ 'font-awesome/css/font-awesome.min.css');
-  await import(
-    /* webpackChunkName: "fontawesome-css-all" */ '@fortawesome/fontawesome-free/css/all.css'
-  );
-  await import(/* webpackChunkName: "fontawesome-js" */ '@fortawesome/fontawesome-free/js/all.min');
-  await import(/* webpackChunkName: "cropper-css" */ 'cropperjs/dist/cropper.css');
-};
-
-loadCss();
-
 const GlobalStyle = createGlobalStyle`
   body {
     background: ${({ theme }) => theme.colors.neutral100};

package/admin/src/components/GuidedTour/Modal/components/Content.js

@@ -8,6 +8,9 @@ import { useIntl } from 'react-intl';
 
 const LiStyled = styled.li`
   list-style: disc;
+  &::marker {
+    color: ${({ theme }) => theme.colors.neutral800};
+  }
 `;
 
 const Content = ({ id, defaultMessage }) => {
@@ -19,13 +22,15 @@ const Content = ({ id, defaultMessage }) => {
         { id, defaultMessage },
         {
           documentationLink: (children) => (
-            <a
+            <Typography
+              as="a"
+              textColor="primary600"
               target="_blank"
               rel="noopener noreferrer"
               href="https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#api-parameters"
             >
               {children}
-            </a>
+            </Typography>
           ),
           b: (children) => <Typography fontWeight="semiBold">{children}</Typography>,
           p: (children) => <Typography>{children}</Typography>,

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

@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { NavLink as RouterNavLink, useLocation } from 'react-router-dom';
+import { NavLink as RouterNavLink, useLocation, useHistory } from 'react-router-dom';
 import { Divider } from '@strapi/design-system/Divider';
 import {
   MainNav,
@@ -20,7 +20,8 @@ import { Stack } from '@strapi/design-system/Stack';
 import Write from '@strapi/icons/Write';
 import Exit from '@strapi/icons/Exit';
 import { auth, usePersistentState, useAppInfos, useTracking } from '@strapi/helper-plugin';
-import useConfigurations from '../../hooks/useConfigurations';
+import { useConfigurations } from '../../hooks';
+import { axiosInstance } from '../../core/utils';
 
 const LinkUserWrapper = styled(Box)`
   width: ${150 / 16}rem;
@@ -61,6 +62,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const { pathname } = useLocation();
+  const history = useHistory();
 
   const initials = userDisplayName
     .split(' ')
@@ -70,9 +72,11 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
 
   const handleToggleUserLinks = () => setUserLinksVisible((prev) => !prev);
 
-  const handleLogout = () => {
+  const handleLogout = async () => {
+    await axiosInstance.post('/admin/logout');
     auth.clearAppStorage();
     handleToggleUserLinks();
+    history.push('/auth/login');
   };
 
   const handleBlur = (e) => {
@@ -205,7 +209,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
                   })}
                 </Typography>
               </LinkUser>
-              <LinkUser tabIndex={0} onClick={handleLogout} logout="logout" to="/auth/login">
+              <LinkUser as="button" tabIndex={0} onClick={handleLogout} logout="logout">
                 <Typography textColor="danger600">
                   {formatMessage({
                     id: 'app.components.LeftMenu.logout',

package/admin/src/components/Notifications/Notification/index.js

@@ -6,7 +6,7 @@ import { Link } from '@strapi/design-system/v2/Link';
 
 const Notification = ({ dispatch, notification }) => {
   const { formatMessage } = useIntl();
-  const { message, link, type, id, onClose, timeout, blockTransition } = notification;
+  const { message, link, type, id, onClose, timeout, blockTransition, title } = notification;
 
   const formattedMessage = (msg) =>
     typeof msg === 'string' ? msg : formatMessage(msg, msg.values);
@@ -37,6 +37,7 @@ const Notification = ({ dispatch, notification }) => {
   let variant;
   let alertTitle;
 
+  // TODO break out this logic into separate file
   if (type === 'info') {
     variant = 'default';
     alertTitle = formatMessage({
@@ -44,17 +45,29 @@ const Notification = ({ dispatch, notification }) => {
       defaultMessage: 'Information:',
     });
   } else if (type === 'warning') {
+    // type should be renamed to danger in the future, but it might introduce changes if done now
+    variant = 'danger';
+    alertTitle = formatMessage({
+      id: 'notification.warning.title',
+      defaultMessage: 'Warning:',
+    });
+  } else if (type === 'softWarning') {
+    // type should be renamed to just warning in the future
+    variant = 'warning';
     alertTitle = formatMessage({
       id: 'notification.warning.title',
       defaultMessage: 'Warning:',
     });
-    variant = 'danger';
   } else {
+    variant = 'success';
     alertTitle = formatMessage({
       id: 'notification.success.title',
       defaultMessage: 'Success:',
     });
-    variant = 'success';
+  }
+
+  if (title) {
+    alertTitle = typeof title === 'string' ? title : formatMessage(title);
   }
 
   return (
@@ -77,6 +90,7 @@ const Notification = ({ dispatch, notification }) => {
       {formattedMessage({
         id: message?.id || message,
         defaultMessage: message?.defaultMessage || message?.id || message,
+        values: message?.values,
       })}
     </Alert>
   );
@@ -124,6 +138,14 @@ Notification.propTypes = {
     onClose: PropTypes.func,
     timeout: PropTypes.number,
     blockTransition: PropTypes.bool,
+    title: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        defaultMessage: PropTypes.string,
+        values: PropTypes.object,
+      }),
+    ]),
   }),
 };
 

package/admin/src/components/Notifications/reducer.js

@@ -23,6 +23,7 @@ const notificationReducer = (state = initialState, action) =>
           timeout: get(action, ['config', 'timeout'], 2500),
           blockTransition: get(action, ['config', 'blockTransition'], false),
           onClose: get(action, ['config', 'onClose'], null),
+          title: get(action, ['config', 'title'], null),
         });
         draftState.notifId = state.notifId + 1;
         break;

package/admin/src/content-manager/components/ComponentIcon/ComponentIcon.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+
+import { Flex } from '@strapi/design-system';
+
+const WIDTH_S = 5;
+const WIDTH_M = 8;
+
+const Wrapper = styled(Flex)`
+  border-radius: ${({ showBackground }) => (showBackground ? `50%` : 0)};
+  color: ${({ theme }) => theme.colors.neutral600};
+  height: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S : WIDTH_M]};
+  width: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S : WIDTH_M]};
+
+  svg {
+    height: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S - 2 : WIDTH_M - 3]};
+    width: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S - 2 : WIDTH_M - 3]};
+  }
+`;
+
+export function ComponentIcon({ showBackground = true, size = 'M' }) {
+  return (
+    <Wrapper
+      alignItems="center"
+      background={showBackground ? 'neutral200' : null}
+      justifyContent="center"
+      size={size}
+      showBackground={showBackground}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+        <path
+          d="M216.3 2c4.8-2.6 10.5-2.6 15.3 0L422.3 106c5.1 2.8 8.3 8.2 8.3 14s-3.2 11.2-8.3 14L231.7 238c-4.8 2.6-10.5 2.6-15.3 0L25.7 134c-5.1-2.8-8.3-8.2-8.3-14s3.2-11.2 8.3-14L216.3 2zM23.7 170l176 96c5.1 2.8 8.3 8.2 8.3 14V496c0 5.6-3 10.9-7.8 13.8s-10.9 3-15.8 .3L8.3 414C3.2 411.2 0 405.9 0 400V184c0-5.6 3-10.9 7.8-13.8s10.9-3 15.8-.3zm400.7 0c5-2.7 11-2.6 15.8 .3s7.8 8.1 7.8 13.8V400c0 5.9-3.2 11.2-8.3 14l-176 96c-5 2.7-11 2.6-15.8-.3s-7.8-8.1-7.8-13.8V280c0-5.9 3.2-11.2 8.3-14l176-96z"
+          fill="currentColor"
+        />
+      </svg>
+    </Wrapper>
+  );
+}
+
+ComponentIcon.defaultProps = {
+  showBackground: true,
+  size: 'M',
+};
+
+ComponentIcon.propTypes = {
+  showBackground: PropTypes.bool,
+  size: PropTypes.string,
+};

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

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

package/admin/src/content-manager/components/DragLayer/ComponentDragPreview.js

@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
 import { Box, Flex, Typography, IconButton } from '@strapi/design-system';
 import { Trash, Drag, CarretDown } from '@strapi/icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const DragPreviewBox = styled(Box)`
   border: 1px solid ${({ theme }) => theme.colors.neutral200};
@@ -27,13 +26,6 @@ const DropdownIconWrapper = styled(Box)`
   }
 `;
 
-const Icon = styled(FontAwesomeIcon)`
-  width: ${pxToRem(12)};
-  height: ${pxToRem(12)};
-
-  color: ${({ theme }) => theme.colors.neutral600};
-`;
-
 const ToggleButton = styled.button`
   border: none;
   background: transparent;
@@ -43,7 +35,7 @@ const ToggleButton = styled.button`
   padding: 0;
 `;
 
-const DragPreview = ({ displayedValue, icon }) => {
+const DragPreview = ({ displayedValue }) => {
   return (
     <DragPreviewBox
       paddingLeft={3}
@@ -60,8 +52,7 @@ const DragPreview = ({ displayedValue, icon }) => {
             <DropdownIconWrapper background="neutral200">
               <CarretDown />
             </DropdownIconWrapper>
-            <Flex gap={2} paddingLeft={icon ? 3 : 6} maxWidth={pxToRem(150)}>
-              {icon ? <Icon icon={icon} /> : null}
+            <Flex gap={2} paddingLeft={6} maxWidth={pxToRem(150)}>
               <Typography textColor="neutral700" ellipsis>
                 {displayedValue}
               </Typography>
@@ -85,13 +76,8 @@ const DragPreview = ({ displayedValue, icon }) => {
   );
 };
 
-DragPreview.defaultProps = {
-  icon: undefined,
-};
-
 DragPreview.propTypes = {
   displayedValue: PropTypes.string.isRequired,
-  icon: PropTypes.string,
 };
 
 export default DragPreview;

package/admin/src/content-manager/components/DragLayer/RelationDragPreview.js

@@ -7,7 +7,7 @@ import { Drag, Cross } from '@strapi/icons';
 import { getTrad } from '../../utils';
 import { PUBLICATION_STATES } from '../RelationInputDataManager/constants';
 import { ChildrenWrapper, StackWrapper } from '../RelationInput/components/RelationItem';
-import { BoxEllipsis, DisconnectButton } from '../RelationInput/RelationInput';
+import { LinkEllipsis, DisconnectButton } from '../RelationInput';
 
 export const RelationDragPreview = ({ status, displayedValue, width }) => {
   const { formatMessage } = useIntl();
@@ -43,12 +43,14 @@ export const RelationDragPreview = ({ status, displayedValue, width }) => {
           <IconButton noBorder>
             <Drag />
           </IconButton>
-          <ChildrenWrapper justifyContent="space-between">
-            <BoxEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
-              <Typography textColor="primary600" ellipsis>
-                {displayedValue}
-              </Typography>
-            </BoxEllipsis>
+          <ChildrenWrapper maxWidth="100%" justifyContent="space-between">
+            <Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
+              <LinkEllipsis>
+                <Typography textColor="primary600" ellipsis>
+                  {displayedValue}
+                </Typography>
+              </LinkEllipsis>
+            </Box>
             {status && (
               <Status variant={statusColor} showBullet={false} size="S">
                 <Typography fontWeight="bold" textColor={`${statusColor}700`}>

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

@@ -67,7 +67,7 @@ const CustomDragLayer = () => {
             <ComponentPreview displayedValue={item.displayedValue} />
           )}
           {actualType === ItemTypes.DYNAMIC_ZONE && (
-            <ComponentPreview icon={item.icon} displayedValue={item.displayedValue} />
+            <ComponentPreview displayedValue={item.displayedValue} />
           )}
           {actualType === ItemTypes.RELATION && (
             <RelationDragPreview

package/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/index.js

@@ -65,6 +65,10 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
     {
       enabled: isOpen,
       staleTime: 0,
+      select: (data) => ({
+        ...data,
+        results: data.results.reverse(),
+      }),
     }
   );
 

package/admin/src/content-manager/components/DynamicZone/components/ComponentCard.js

@@ -7,23 +7,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { Box } from '@strapi/design-system/Box';
 import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import { pxToRem } from '@strapi/helper-plugin';
 
-const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
-  width: ${pxToRem(32)} !important;
-  height: ${pxToRem(32)} !important;
-  padding: ${pxToRem(9)};
-  border-radius: ${pxToRem(64)};
-  background: ${({ theme }) => theme.colors.neutral150};
-  path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
+import { ComponentIcon } from '../../ComponentIcon';
 
 const ComponentBox = styled(Box)`
   flex-shrink: 0;
@@ -35,46 +25,42 @@ const ComponentBox = styled(Box)`
   justify-content: center;
   align-items: center;
 
-  &.active,
+  &:focus,
   &:hover {
     border: 1px solid ${({ theme }) => theme.colors.primary200};
     background: ${({ theme }) => theme.colors.primary100};
 
-    ${StyledFontAwesomeIcon} {
-      background: ${({ theme }) => theme.colors.primary200};
-      path {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
+    ${Typography} {
+      color: ${({ theme }) => theme.colors.primary600};
     }
 
-    ${Typography} {
+    /* > Stack > ComponentIcon */
+    > div > div:first-child {
+      background: ${({ theme }) => theme.colors.primary200};
       color: ${({ theme }) => theme.colors.primary600};
     }
   }
 `;
 
-export default function ComponentCard({ children, icon, onClick }) {
+export default function ComponentCard({ children, onClick }) {
   return (
-    <button type="button" onClick={onClick}>
-      <ComponentBox borderRadius="borderRadius">
-        <Stack spacing={1} style={{ justifyContent: 'center', alignItems: 'center' }}>
-          <StyledFontAwesomeIcon data-testid="component-card-icon" icon={icon} />
-          <Typography variant="pi" fontWeight="bold" textColor="neutral600">
-            {children}
-          </Typography>
-        </Stack>
-      </ComponentBox>
-    </button>
+    <ComponentBox as="button" type="button" onClick={onClick} hasRadius>
+      <Stack spacing={1} alignItems="center" justifyContent="center">
+        <ComponentIcon />
+
+        <Typography variant="pi" fontWeight="bold" textColor="neutral600">
+          {children}
+        </Typography>
+      </Stack>
+    </ComponentBox>
   );
 }
 
 ComponentCard.defaultProps = {
-  icon: 'dice-d6',
   onClick() {},
 };
 
 ComponentCard.propTypes = {
   children: PropTypes.node.isRequired,
-  icon: PropTypes.string,
   onClick: PropTypes.func,
 };

package/admin/src/content-manager/components/DynamicZone/components/ComponentCategory.js

@@ -30,8 +30,8 @@ const ComponentCategory = ({ category, components, variant, isOpen, onAddCompone
       <AccordionContent>
         <Box paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>
           <Grid>
-            {components.map(({ componentUid, info: { displayName, icon } }) => (
-              <ComponentCard key={componentUid} icon={icon} onClick={onAddComponent(componentUid)}>
+            {components.map(({ componentUid, info: { displayName } }) => (
+              <ComponentCard key={componentUid} onClick={onAddComponent(componentUid)}>
                 {formatMessage({ id: displayName, defaultMessage: displayName })}
               </ComponentCard>
             ))}

package/admin/src/content-manager/components/DynamicZone/components/DynamicComponent.js

@@ -2,7 +2,6 @@ import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import get from 'lodash/get';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 
@@ -99,7 +98,7 @@ const DynamicZoneComponent = ({
 
     const mainField = get(modifiedData, [name, index, mainFieldKey]) ?? '';
 
-    const displayedValue = mainFieldKey === 'id' ? '' : mainField.trim();
+    const displayedValue = mainFieldKey === 'id' ? '' : String(mainField).trim();
 
     const mainValue = displayedValue.length > 0 ? ` - ${displayedValue}` : displayedValue;
 
@@ -194,7 +193,6 @@ const DynamicZoneComponent = ({
         ) : (
           <Accordion expanded={isOpen} onToggle={handleToggle} size="S" error={errorMessage}>
             <AccordionToggle
-              startIcon={icon && <FontAwesomeIcon icon={icon} />}
               action={accordionActions}
               title={`${friendlyName}${mainValue}`}
               togglePosition="left"

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

@@ -21,7 +21,7 @@ import {
   getAPIInnerErrors,
 } from '@strapi/helper-plugin';
 
-import { getTrad, removeKeyInObject } from '../../utils';
+import { getTrad } from '../../utils';
 
 import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
 
@@ -261,10 +261,11 @@ const EditViewDataManagerProvider = ({
     });
   }, []);
 
-  const relationLoad = useCallback(({ target: { name, value } }) => {
+  const relationLoad = useCallback(({ target: { initialDataPath, modifiedDataPath, value } }) => {
     dispatch({
       type: 'LOAD_RELATION',
-      keys: name.split('.'),
+      modifiedDataPath,
+      initialDataPath,
       value,
     });
   }, []);
@@ -360,11 +361,9 @@ const EditViewDataManagerProvider = ({
 
   const createFormData = useCallback(
     (modifiedData, initialData) => {
-      // First we need to remove the added keys needed for the dnd
-      const preparedData = removeKeyInObject(cloneDeep(modifiedData), '__temp_key__');
       // Then we need to apply our helper
       const cleanedData = cleanData(
-        { browserState: preparedData, serverState: initialData },
+        { browserState: modifiedData, serverState: initialData },
         currentContentTypeLayout,
         allLayoutData.components
       );

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

@@ -6,6 +6,8 @@ import take from 'lodash/take';
 import cloneDeep from 'lodash/cloneDeep';
 import uniqBy from 'lodash/uniqBy';
 import merge from 'lodash/merge';
+import castArray from 'lodash/castArray';
+import isNil from 'lodash/isNil';
 
 import {
   findLeafByPathAndReplace,
@@ -105,6 +107,11 @@ const reducer = (state, action) =>
           (value) => value.type === 'component' && value.repeatable
         )(componentLayoutData.attributes);
 
+        const nonRepeatableComponentPaths = recursivelyFindPathsBasedOnCondition(
+          allComponents,
+          (value) => value.type === 'component' && !value.repeatable
+        )(componentLayoutData.attributes);
+
         const componentDataStructure = relationPaths.reduce((acc, current) => {
           const [componentName] = current.split('.');
 
@@ -113,8 +120,21 @@ const reducer = (state, action) =>
            * has another repeatable component inside of it we
            * don't need to attach the array at this point because that will be
            * done again deeper in the nest.
+           *
+           * We also need to handle cases with single components nested within
+           * repeatables by checking that the relation path does not match a
+           * non-repeatable component path. This accounts for component
+           * structures such as:
+           * - outer_single_compo
+           *    - level_one_repeatable
+           *        - level_two_single_component
+           *            - level_three_repeatable
            */
-          if (!repeatableFields.includes(componentName)) {
+
+          if (
+            !repeatableFields.includes(componentName) &&
+            !nonRepeatableComponentPaths.includes(componentName)
+          ) {
             set(acc, current, []);
           }
 
@@ -129,24 +149,34 @@ const reducer = (state, action) =>
 
         break;
       }
-
       case 'LOAD_RELATION': {
-        const initialDataPath = ['initialData', ...action.keys];
-        const modifiedDataPath = ['modifiedData', ...action.keys];
-        const { value } = action;
+        const { initialDataPath, modifiedDataPath, value } = action;
 
         const initialDataRelations = get(state, initialDataPath);
         const modifiedDataRelations = get(state, modifiedDataPath);
 
-        set(draftState, initialDataPath, uniqBy([...value, ...initialDataRelations], 'id'));
+        /**
+         * Check if the values we're loading are already in initial
+         * data if they are then we don't need to load them at all
+         */
+        const valuesToLoad = value.filter((relation) => {
+          return !initialDataRelations.some((initialDataRelation) => {
+            return initialDataRelation.id === relation.id;
+          });
+        });
+
+        set(draftState, initialDataPath, uniqBy([...valuesToLoad, ...initialDataRelations], 'id'));
 
         /**
          * We need to set the value also on modifiedData, because initialData
          * and modifiedData need to stay in sync, so that the CM can compare
          * both states, to render the dirty UI state
          */
-
-        set(draftState, modifiedDataPath, uniqBy([...value, ...modifiedDataRelations], 'id'));
+        set(
+          draftState,
+          modifiedDataPath,
+          uniqBy([...valuesToLoad, ...modifiedDataRelations], 'id')
+        );
 
         break;
       }
@@ -230,6 +260,17 @@ const reducer = (state, action) =>
           .reduce((acc, currentPaths) => {
             const [componentName] = currentPaths;
 
+            const existingComponents = castArray(acc[componentName] || []);
+            existingComponents.reduce((result, currentEntry) => {
+              if (!isNil(get(currentEntry, [`__temp_key__`]))) {
+                return result;
+              }
+
+              set(currentEntry, [`__temp_key__`], getMaxTempKey(result) + 1);
+
+              return result;
+            }, existingComponents);
+
             if (state.modifiedData && get(state.modifiedData, componentName)) {
               /**
                * this will be null on initial load, however subsequent calls