@strapi/admin 4.6.0-beta.1 → 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/GlobalStyle/index.js

@@ -1,11 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
 
-const loadCss = async () => {
-  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/DragLayer/RelationDragPreview.js

@@ -43,12 +43,14 @@ export const RelationDragPreview = ({ status, displayedValue, width }) => {
           <IconButton noBorder>
             <Drag />
           </IconButton>
-          <ChildrenWrapper justifyContent="space-between">
-            <LinkEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
-              <Typography textColor="primary600" ellipsis>
-                {displayedValue}
-              </Typography>
-            </LinkEllipsis>
+          <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/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/DynamicComponent.js

@@ -98,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;
 

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,
@@ -148,22 +150,33 @@ 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;
       }
@@ -247,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

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/cleanData.js

@@ -1,6 +1,7 @@
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
+import { getInitialDataPathUsingTempKeys } from '../../../utils/paths';
 
 /* eslint-disable indent */
 
@@ -12,6 +13,8 @@ import isObject from 'lodash/isObject';
  * @returns
  */
 const cleanData = ({ browserState, serverState }, currentSchema, componentsSchema) => {
+  const rootServerState = serverState;
+  const rootBrowserState = browserState;
   const getType = (schema, attrName) => get(schema, ['attributes', attrName, 'type'], '');
   const getOtherInfos = (schema, arr) => get(schema, ['attributes', ...arr], '');
 
@@ -20,10 +23,12 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
    * @param {object} browserState – the modifiedData from REDUX
    * @param {object} serverState – the initialData from REDUX
    * @param {*} schema
+   * @param {string} pathToParent - the path to the parent of the current entry
    * @returns
    */
-  const recursiveCleanData = (browserState, serverState, schema) => {
+  const recursiveCleanData = (browserState, serverState, schema, pathToParent) => {
     return Object.keys(browserState).reduce((acc, current) => {
+      const path = pathToParent ? `${pathToParent}.${current}` : current;
       const attrType = getType(schema, current);
 
       // This is the field value
@@ -61,7 +66,8 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
                   const subCleanedData = recursiveCleanData(
                     data,
                     (oldValue ?? [])[index],
-                    componentsSchema[component]
+                    componentsSchema[component],
+                    `${path}.${index}`
                   );
 
                   return subCleanedData;
@@ -69,20 +75,25 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
               : value;
           } else {
             cleanedData = value
-              ? recursiveCleanData(value, oldValue, componentsSchema[component])
+              ? recursiveCleanData(value, oldValue, componentsSchema[component], path)
               : value;
           }
 
           break;
 
         case 'relation': {
+          const trueInitialDataPath = getInitialDataPathUsingTempKeys(
+            rootServerState,
+            rootBrowserState
+          )(path).join('.');
+
           /**
            * Because of how repeatable components work when you dig into them the server
            * will have no object to compare too therefore no relation array will be setup
            * because the component has not been initialised, therefore we can safely assume
            * it needs to be added and provide a default empty array.
            */
-          let actualOldValue = oldValue ?? [];
+          let actualOldValue = get(rootServerState, trueInitialDataPath, []);
 
           const valuesWithPositions = value.map((relation, index, allRelations) => {
             const nextRelation = allRelations[index + 1];
@@ -141,7 +152,8 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
             const subCleanedData = recursiveCleanData(
               componentData,
               (oldValue ?? [])[index],
-              componentsSchema[componentData.__component]
+              componentsSchema[componentData.__component],
+              `${path}.${index}`
             );
 
             return subCleanedData;
@@ -157,7 +169,7 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
     }, {});
   };
 
-  return recursiveCleanData(browserState, serverState, currentSchema);
+  return recursiveCleanData(browserState, serverState, currentSchema, '');
 };
 
 // TODO: check which parts are still needed: I suspect the

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/findLeafByPathAndReplace.js

@@ -24,7 +24,8 @@ export const findLeafByPathAndReplace = (endpath, replaceWith) => {
      * and the current path is not undefined in the accumulator
      * then we assume it's a leaf and we can replace it.
      */
-    if (endpath === curr && acc[curr] !== undefined) {
+
+    if (ind === currentArr.length - 1 && endpath === curr && acc[curr] !== undefined) {
       set(acc, curr, replaceWith);
 
       return acc;

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/schema.js

@@ -284,7 +284,8 @@ const createYupSchemaAttribute = (type, validations, options) => {
                   }
 
                   if (type === 'boolean') {
-                    return value !== null;
+                    // Boolean value can be undefined/unset in modifiedData when generated in a new component
+                    return value !== null && value !== undefined;
                   }
 
                   if (type === 'date' || type === 'datetime') {

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

@@ -4,20 +4,22 @@ import PropTypes from 'prop-types';
 import size from 'lodash/size';
 import isEqual from 'react-fast-compare';
 import { useIntl } from 'react-intl';
+
 import { NotAllowedInput } from '@strapi/helper-plugin';
 import Trash from '@strapi/icons/Trash';
 import { Box } from '@strapi/design-system/Box';
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
-import { getTrad } from '../../utils';
-import ComponentInitializer from '../ComponentInitializer';
-import NonRepeatableComponent from '../NonRepeatableComponent';
-import RepeatableComponent from '../RepeatableComponent';
+
 import connect from './utils/connect';
 import select from './utils/select';
 import Label from './Label';
+import ComponentInitializer from '../ComponentInitializer';
+import NonRepeatableComponent from '../NonRepeatableComponent';
+import RepeatableComponent from '../RepeatableComponent';
 import { useContentTypeLayout } from '../../hooks';
+import { getTrad } from '../../utils';
 
 const FieldComponent = ({
   addNonRepeatableComponentToField,

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

@@ -38,12 +38,13 @@ export const LinkEllipsis = styled(Link)`
 
 export const DisconnectButton = styled.button`
   svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
+    fill: ${({ theme, disabled }) =>
+      disabled ? theme.colors.neutral600 : theme.colors.neutral500};
   }
 
   &:hover svg path,
   &:focus svg path {
-    fill: ${({ theme }) => theme.colors.neutral600};
+    fill: ${({ theme, disabled }) => !disabled && theme.colors.neutral600};
   }
 `;
 
@@ -103,8 +104,7 @@ const RelationInput = ({
   );
 
   const shouldDisplayLoadMoreButton =
-    (!!labelLoadMore && !disabled && paginatedRelations.hasNextPage) ||
-    paginatedRelations.isLoading;
+    (!!labelLoadMore && paginatedRelations.hasNextPage) || paginatedRelations.isLoading;
 
   const options = useMemo(
     () =>
@@ -473,7 +473,7 @@ const ListItem = ({ data, index, style }) => {
       ariaDescribedBy={ariaDescribedBy}
       canDrag={canDrag}
       disabled={disabled}
-      displayValue={mainField ?? id}
+      displayValue={String(mainField ?? id)}
       iconButtonAriaLabel={iconButtonAriaLabel}
       id={id}
       index={index}
@@ -503,9 +503,7 @@ const ListItem = ({ data, index, style }) => {
       <Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
         <Tooltip description={mainField ?? `${id}`}>
           {href ? (
-            <LinkEllipsis to={href} disabled={disabled}>
-              {mainField ?? id}
-            </LinkEllipsis>
+            <LinkEllipsis to={href}>{mainField ?? id}</LinkEllipsis>
           ) : (
             <Typography textColor={disabled ? 'neutral600' : 'primary600'} ellipsis>
               {mainField ?? id}

package/admin/src/content-manager/components/RelationInput/components/RelationItem.js

@@ -16,6 +16,10 @@ export const StackWrapper = styled(Stack)`
   width: 100%;
   /* Used to prevent endAction to be pushed out of container */
   min-width: 0;
+
+  & > div[role='button'] {
+    cursor: all-scroll;
+  }
 `;
 
 export const ChildrenWrapper = styled(Flex)`
@@ -83,8 +87,8 @@ export const RelationItem = ({
           paddingRight={4}
           hasRadius
           borderSize={1}
-          background={disabled ? 'neutral150' : 'neutral0'}
           borderColor="neutral200"
+          background={disabled ? 'neutral150' : 'neutral0'}
           justifyContent="space-between"
           ref={canDrag ? composedRefs : undefined}
           data-handler-id={handlerId}
@@ -99,6 +103,7 @@ export const RelationItem = ({
                 aria-label={iconButtonAriaLabel}
                 noBorder
                 onKeyDown={handleKeyDown}
+                disabled={disabled}
               >
                 <Drag />
               </IconButton>

package/admin/src/content-manager/components/RelationInput/components/RelationList.js

@@ -18,18 +18,22 @@ const ShadowBox = styled(Box)`
 
   &:before {
     /* TODO: as for DS Table component we would need this to be handled by the DS theme */
-    content: ${({ overflowDirection }) =>
-      overflowDirection === 'top-bottom' || overflowDirection === 'top' ? "''" : undefined};
-    background: linear-gradient(rgba(33, 33, 52, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
+    content: '';
+    background: linear-gradient(rgba(3, 3, 5, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
     top: 0;
+    opacity: ${({ overflowDirection }) =>
+      overflowDirection === 'top-bottom' || overflowDirection === 'top' ? 1 : 0};
+    transition: opacity 0.2s ease-in-out;
   }
 
   &:after {
     /* TODO: as for DS Table component we would need this to be handled by the DS theme */
-    content: ${({ overflowDirection }) =>
-      overflowDirection === 'top-bottom' || overflowDirection === 'bottom' ? "''" : undefined};
-    background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(33, 33, 52, 0.1) 100%);
+    content: '';
+    background: linear-gradient(0deg, rgba(3, 3, 5, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
     bottom: 0;
+    opacity: ${({ overflowDirection }) =>
+      overflowDirection === 'top-bottom' || overflowDirection === 'bottom' ? 1 : 0};
+    transition: opacity 0.2s ease-in-out;
   }
 `;
 

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

@@ -15,6 +15,7 @@ import { getTrad } from '../../utils';
 
 import { PUBLICATION_STATES, RELATIONS_TO_DISPLAY, SEARCH_RESULTS_TO_DISPLAY } from './constants';
 import { connect, select, normalizeSearchResults, diffRelations, normalizeRelation } from './utils';
+import { getInitialDataPathUsingTempKeys } from '../../utils/paths';
 
 export const RelationInputDataManager = ({
   error,
@@ -37,7 +38,6 @@ export const RelationInputDataManager = ({
   targetModel,
 }) => {
   const [liveText, setLiveText] = useState('');
-
   const { formatMessage } = useIntl();
   const {
     slug,
@@ -49,12 +49,16 @@ export const RelationInputDataManager = ({
     relationReorder,
   } = useCMEditViewDataManager();
 
+  const nameSplit = name.split('.');
+
+  const initialDataPath = getInitialDataPathUsingTempKeys(initialData, modifiedData)(name);
+
   const relationsFromModifiedData = get(modifiedData, name, []);
 
   const currentLastPage = Math.ceil(get(initialData, name, []).length / RELATIONS_TO_DISPLAY);
 
-  const { relations, search, searchFor } = useRelation(`${slug}-${name}-${initialData?.id ?? ''}`, {
-    name,
+  const cacheKey = `${slug}-${initialDataPath.join('.')}`;
+  const { relations, search, searchFor } = useRelation(cacheKey, {
     relation: {
       enabled: !!endpoints.relation,
       endpoint: endpoints.relation,
@@ -63,14 +67,21 @@ export const RelationInputDataManager = ({
         ...defaultParams,
         pageSize: RELATIONS_TO_DISPLAY,
       },
-      onLoad: relationLoad,
+      onLoad(value) {
+        relationLoad({
+          target: {
+            initialDataPath: ['initialData', ...initialDataPath],
+            modifiedDataPath: ['modifiedData', ...nameSplit],
+            value,
+          },
+        });
+      },
       normalizeArguments: {
         mainFieldName: mainField.name,
         shouldAddLink: shouldDisplayRelationLink,
         targetModel,
       },
     },
-
     search: {
       endpoint: endpoints.search,
       pageParams: {
@@ -257,7 +268,7 @@ export const RelationInputDataManager = ({
    * actually subtract from the total number on the server (regardless of how many you fetched).
    */
   const browserRelationsCount = relationsFromModifiedData.length;
-  const serverRelationsCount = (get(initialData, name) ?? []).length;
+  const serverRelationsCount = (get(initialData, initialDataPath) ?? []).length;
   const realServerRelationsCount = relations.data?.pages[0]?.pagination?.total ?? 0;
   /**
    * _IF_ theres no relations data and the browserCount is the same as serverCount you can therefore assume