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

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/InputJSON/FieldWrapper.js

@@ -3,12 +3,18 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Field } from '@strapi/design-system/Field';
 
-const FieldWrapper = ({ name, hint, error, children }) => {
+const FieldWrapper = ({ name, hint, error, children, required }) => {
   const { formatMessage } = useIntl();
   const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
 
   return (
-    <Field name={name} hint={hint && formatMessage(hint)} error={errorMessage} id={name}>
+    <Field
+      name={name}
+      hint={hint && formatMessage(hint)}
+      error={errorMessage}
+      id={name}
+      required={required}
+    >
       {children}
     </Field>
   );
@@ -17,6 +23,7 @@ const FieldWrapper = ({ name, hint, error, children }) => {
 FieldWrapper.defaultProps = {
   hint: undefined,
   error: '',
+  required: false,
 };
 
 FieldWrapper.propTypes = {
@@ -27,6 +34,7 @@ FieldWrapper.propTypes = {
   }),
   error: PropTypes.string,
   children: PropTypes.node.isRequired,
+  required: PropTypes.bool,
 };
 
 export default FieldWrapper;

package/admin/src/content-manager/components/InputJSON/Label.js

@@ -1,18 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { FieldLabel } from '@strapi/design-system/Field';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
 
-const LabelAction = styled(Box)`
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-
-const Label = ({ intlLabel, labelAction, name, required }) => {
+const Label = ({ intlLabel, labelAction, name }) => {
   const { formatMessage } = useIntl();
   const label = intlLabel?.id
     ? formatMessage(
@@ -21,19 +12,13 @@ const Label = ({ intlLabel, labelAction, name, required }) => {
       )
     : name;
 
-  return (
-    <Flex>
-      <FieldLabel required={required}>{label}</FieldLabel>
-      {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-    </Flex>
-  );
+  return <FieldLabel action={labelAction}>{label}</FieldLabel>;
 };
 
 Label.defaultProps = {
   id: undefined,
   intlLabel: undefined,
   labelAction: undefined,
-  required: false,
 };
 
 Label.propTypes = {
@@ -45,7 +30,6 @@ Label.propTypes = {
   }),
   labelAction: PropTypes.element,
   name: PropTypes.string.isRequired,
-  required: PropTypes.bool,
 };
 
 export default Label;

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

@@ -157,13 +157,17 @@ class InputJSON extends React.Component {
     }
 
     return (
-      <FieldWrapper name={this.props.name} hint={this.props.description} error={this.props.error}>
+      <FieldWrapper
+        name={this.props.name}
+        hint={this.props.description}
+        error={this.props.error}
+        required={this.props.required}
+      >
         <Stack spacing={1}>
           <Label
             intlLabel={this.props.intlLabel}
-            labelAction={this.props.labelAction}
             name={this.props.name}
-            required={this.props.required}
+            labelAction={this.props.labelAction}
           />
           <StyledBox error={this.props.error}>
             <EditorWrapper disabled={this.props.disabled}>

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

@@ -25,30 +25,26 @@ import { RELATION_GUTTER, RELATION_ITEM_HEIGHT } from './constants';
 
 import { usePrev } from '../../hooks';
 
-const LinkEllipsis = styled(Link)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inherit;
-`;
+export const LinkEllipsis = styled(Link)`
+  display: block;
 
-export const BoxEllipsis = styled(Box)`
   > span {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: inherit;
+    display: block;
   }
 `;
 
 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};
   }
 `;
 
@@ -108,8 +104,7 @@ const RelationInput = ({
   );
 
   const shouldDisplayLoadMoreButton =
-    (!!labelLoadMore && !disabled && paginatedRelations.hasNextPage) ||
-    paginatedRelations.isLoading;
+    (!!labelLoadMore && paginatedRelations.hasNextPage) || paginatedRelations.isLoading;
 
   const options = useMemo(
     () =>
@@ -267,15 +262,13 @@ const RelationInput = ({
   const ariaDescriptionId = `${name}-item-instructions`;
 
   return (
-    <Field error={error} name={name} hint={description} id={id}>
+    <Field error={error} name={name} hint={description} id={id} required={required}>
       <Relation
         totalNumberOfRelations={totalNumberOfRelations}
         size={size}
         search={
           <>
-            <FieldLabel action={labelAction} required={required}>
-              {label}
-            </FieldLabel>
+            <FieldLabel action={labelAction}>{label}</FieldLabel>
             <ReactSelect
               // position fixed doesn't update position on scroll
               // react select doesn't update menu position on options change
@@ -352,9 +345,7 @@ const RelationInput = ({
                 relations,
                 updatePositionOfRelation: handleUpdatePositionOfRelation,
               }}
-              itemKey={(index, { relations: relationsItems }) =>
-                `${relationsItems[index].mainField}_${relationsItems[index].id}`
-              }
+              itemKey={(index) => `${relations[index].mainField}_${relations[index].id}`}
               innerElementType="ol"
             >
               {ListItem}
@@ -482,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}
@@ -509,19 +500,17 @@ const ListItem = ({ data, index, style }) => {
       }}
       updatePositionOfRelation={updatePositionOfRelation}
     >
-      <BoxEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
+      <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}
             </Typography>
           )}
         </Tooltip>
-      </BoxEllipsis>
+      </Box>
 
       {publicationState && (
         <Status variant={statusColor} showBullet={false} size="S">

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)`
@@ -50,11 +54,13 @@ export const RelationItem = ({
       item: {
         displayedValue: displayValue,
         status,
+        id,
       },
       onGrabItem,
       onDropItem,
       onCancel,
       onMoveItem: updatePositionOfRelation,
+      dropSensitivity: 'immediate',
     });
 
   const composedRefs = composeRefs(relationRef, dragRef);
@@ -81,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}
@@ -97,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/RelationInput/index.js

@@ -1 +1,2 @@
 export { default as RelationInput } from './RelationInput';
+export * from './RelationInput';

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

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

@@ -17,7 +17,7 @@ function useSelect({
     readActionAllowedFields,
     updateActionAllowedFields,
     slug,
-    initialData,
+    modifiedData,
   } = useCMEditViewDataManager();
 
   const isFieldAllowed = useMemo(() => {
@@ -50,7 +50,7 @@ function useSelect({
   let componentId;
 
   if (componentUid) {
-    componentId = get(initialData, fieldNameKeys.slice(0, -1))?.id;
+    componentId = get(modifiedData, fieldNameKeys.slice(0, -1))?.id;
   }
 
   // /content-manager/relations/[model]/[id]/[field-name]
@@ -61,15 +61,15 @@ function useSelect({
 
     if (componentUid) {
       // repeatable components and dz are dynamically created
-      // if no componentId exists in initialData it means that the user just created it
+      // if no componentId exists in modifiedData it means that the user just created it
       // there then are no relations to request
       return componentId
         ? getRequestUrl(`relations/${componentUid}/${componentId}/${fieldNameKeys.at(-1)}`)
         : null;
     }
 
-    return getRequestUrl(`relations/${slug}/${initialData.id}/${name.split('.').at(-1)}`);
-  }, [isCreatingEntry, componentUid, slug, initialData.id, name, componentId, fieldNameKeys]);
+    return getRequestUrl(`relations/${slug}/${modifiedData.id}/${name.split('.').at(-1)}`);
+  }, [isCreatingEntry, componentUid, slug, modifiedData.id, name, componentId, fieldNameKeys]);
 
   // /content-manager/relations/[model]/[field-name]
   const relationSearchEndpoint = useMemo(() => {

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

@@ -51,9 +51,7 @@ const RepeatableComponent = ({
     [componentUid, getComponentLayout]
   );
 
-  const nextTempKey = useMemo(() => {
-    return getMaxTempKey(componentValue || []) + 1;
-  }, [componentValue]);
+  const nextTempKey = useMemo(() => getMaxTempKey(componentValue || []) + 1, [componentValue]);
 
   const componentErrorKeys = getComponentErrorKeys(name, formErrors);
 
@@ -199,29 +197,24 @@ const RepeatableComponent = ({
       <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
       <Accordion.Group error={errorMessage} ariaDescribedBy={ariaDescriptionId}>
         <Accordion.Content aria-describedby={ariaDescriptionId}>
-          {componentValue.map((data, index) => {
-            const key = data.__temp_key__;
-            const componentFieldName = `${name}.${index}`;
-
-            return (
-              <Component
-                componentFieldName={componentFieldName}
-                componentUid={componentUid}
-                fields={componentLayoutData.layouts.edit}
-                key={key}
-                index={index}
-                isOpen={collapseToOpen === key}
-                isReadOnly={isReadOnly}
-                mainField={mainField}
-                moveComponentField={handleMoveComponentField}
-                onClickToggle={handleToggle(key)}
-                toggleCollapses={toggleCollapses}
-                onCancel={handleCancel}
-                onDropItem={handleDropItem}
-                onGrabItem={handleGrabItem}
-              />
-            );
-          })}
+          {componentValue.map(({ __temp_key__: key }, index) => (
+            <Component
+              componentFieldName={`${name}.${index}`}
+              componentUid={componentUid}
+              fields={componentLayoutData.layouts.edit}
+              key={key}
+              index={index}
+              isOpen={collapseToOpen === key}
+              isReadOnly={isReadOnly}
+              mainField={mainField}
+              moveComponentField={handleMoveComponentField}
+              onClickToggle={handleToggle(key)}
+              toggleCollapses={toggleCollapses}
+              onCancel={handleCancel}
+              onDropItem={handleDropItem}
+              onGrabItem={handleGrabItem}
+            />
+          ))}
         </Accordion.Content>
         <Accordion.Footer>
           <Flex justifyContent="center" height="48px" background="neutral0">

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ *
+ * @type {<T extends (...args: any[]) => any>(callback: T | undefined) => T}
+ */
+export const useCallbackRef = (callback) => {
+  const callbackRef = React.useRef(callback);
+
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  // https://github.com/facebook/react/issues/19240
+  return React.useMemo(
+    () =>
+      (...args) =>
+        callbackRef.current?.(...args),
+    []
+  );
+};