@strapi/admin 4.6.0-beta.1 → 4.6.0

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

@@ -1,18 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
 import { Typography } from '@strapi/design-system/Typography';
 
-export const Hint = ({ id, error, name, description }) => {
-  const { formatMessage } = useIntl();
-  const hint = description
-    ? formatMessage(
-        { id: description.id, defaultMessage: description.defaultMessage },
-        { ...description.values }
-      )
-    : '';
-
-  if (!hint || error) {
+export const Hint = ({ id, error, name, hint }) => {
+  if (hint.length === 0 || error) {
     return null;
   }
 
@@ -25,16 +16,12 @@ export const Hint = ({ id, error, name, description }) => {
 
 Hint.defaultProps = {
   id: undefined,
-  description: undefined,
   error: undefined,
+  hint: '',
 };
 
 Hint.propTypes = {
-  description: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   error: PropTypes.string,
   id: PropTypes.string,
   name: PropTypes.string.isRequired,

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

@@ -23,7 +23,7 @@ import {
 const InputUID = ({
   attribute,
   contentTypeUID,
-  description,
+  hint,
   disabled,
   error,
   intlLabel,
@@ -54,13 +54,6 @@ const InputUID = ({
       )
     : name;
 
-  const hint = description
-    ? formatMessage(
-        { id: description.id, defaultMessage: description.defaultMessage },
-        { ...description.values }
-      )
-    : '';
-
   const formattedPlaceholder = placeholder
     ? formatMessage(
         { id: placeholder.id, defaultMessage: placeholder.defaultMessage },
@@ -251,11 +244,6 @@ InputUID.propTypes = {
     required: PropTypes.bool,
   }).isRequired,
   contentTypeUID: PropTypes.string.isRequired,
-  description: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
   disabled: PropTypes.bool,
   error: PropTypes.string,
   intlLabel: PropTypes.shape({
@@ -273,16 +261,17 @@ InputUID.propTypes = {
     values: PropTypes.object,
   }),
   required: PropTypes.bool,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
 };
 
 InputUID.defaultProps = {
-  description: undefined,
   disabled: false,
   error: undefined,
   labelAction: undefined,
   placeholder: undefined,
   value: '',
   required: false,
+  hint: '',
 };
 
 export default InputUID;

package/admin/src/content-manager/components/PreviewWysiwyg/Wrapper.js

@@ -9,9 +9,8 @@ const Wrapper = styled.div`
   padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};
   font-size: ${14 / 16}rem;
   background-color: ${({ theme }) => theme.colors.neutral0};
-  z-index: 2;
-  cursor: not-allowed;
   color: ${({ theme }) => theme.colors.neutral800};
+  line-height: ${({ theme }) => theme.lineHeights[6]};
 
   h1,
   h2,
@@ -19,12 +18,12 @@ const Wrapper = styled.div`
   h4,
   h5,
   h6 {
-    margin-block-start: 10px;
-    margin-block-end: 10px;
+    margin-block-start: ${({ theme }) => theme.spaces[2]};
+    margin-block-end: ${({ theme }) => theme.spaces[2]};
   }
 
   p {
-    margin-bottom: 10px;
+    margin-bottom: ${({ theme }) => theme.spaces[2]};
   }
 
   h1 {
@@ -56,13 +55,13 @@ const Wrapper = styled.div`
   }
 
   blockquote {
-    margin-top: 41px;
-    margin-bottom: 34px;
+    margin-top: ${({ theme }) => theme.spaces[8]};
+    margin-bottom: ${({ theme }) => theme.spaces[7]};
     font-size: ${14 / 16}rem;
     font-weight: 400;
-    border-left: 5px solid #eee;
+    border-left: 4px solid ${({ theme }) => theme.colors.neutral150};
     font-style: italic;
-    padding: 10px 20px;
+    padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[5]};
   }
 
   img {
@@ -91,9 +90,18 @@ const Wrapper = styled.div`
 
   pre,
   code {
-    font-size: 13px;
-    border-radius: 3px;
-    background-color: #002b36;
+    font-size: ${14 / 16}rem;
+    border-radius: 4px;
+    /* 
+      Hard coded since the color is the same between themes,
+      theme.colors.neutral800 changes between themes.
+
+      Matches the color of the JSON Input component.
+    */
+    background-color: #32324d;
+    max-width: 100%;
+    overflow: auto;
+    padding: ${({ theme }) => theme.spaces[2]};
   }
 
   /* Inline code */
@@ -105,21 +113,6 @@ const Wrapper = styled.div`
     }
   }
 
-  .warning {
-    background-color: #faa684;
-    padding: 30px;
-    border-radius: 3px;
-  }
-  .tip {
-    padding: 30px;
-    border-radius: 3px;
-  }
-
-  .footnote-ref,
-  .footnote-backref {
-    color: #007bff;
-  }
-
   ol {
     list-style-type: decimal;
     margin-block-start: ${({ theme }) => theme.spaces[4]};
@@ -127,6 +120,7 @@ const Wrapper = styled.div`
     margin-inline-start: 0px;
     margin-inline-end: 0px;
     padding-inline-start: ${({ theme }) => theme.spaces[4]};
+
     ol,
     ul {
       margin-block-start: 0px;
@@ -141,6 +135,7 @@ const Wrapper = styled.div`
     margin-inline-start: 0px;
     margin-inline-end: 0px;
     padding-inline-start: ${({ theme }) => theme.spaces[4]};
+
     ul,
     ol {
       margin-block-start: 0px;

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

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

@@ -197,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/components/Wysiwyg/EditorLayout.js

@@ -1,15 +1,11 @@
-import React, { useEffect } from 'react';
+import React from 'react';
+import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Flex } from '@strapi/design-system/Flex';
-import { Box } from '@strapi/design-system/Box';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
-import { Portal } from '@strapi/design-system/Portal';
-import { BaseButton } from '@strapi/design-system/BaseButton';
-import { Typography } from '@strapi/design-system/Typography';
-import { pxToRem } from '@strapi/helper-plugin';
-import Collapse from '@strapi/icons/Collapse';
-import { useIntl } from 'react-intl';
+import { BaseButton, Box, Flex, FocusTrap, Portal, Typography } from '@strapi/design-system';
+import { Collapse } from '@strapi/icons';
+import { pxToRem, useLockScroll } from '@strapi/helper-plugin';
+
 import PreviewWysiwyg from '../PreviewWysiwyg';
 
 const setOpacity = (hex, alpha) =>
@@ -32,6 +28,7 @@ export const ExpandButton = styled(BaseButton)`
 
   svg {
     margin-left: ${({ theme }) => `${theme.spaces[2]}`};
+
     path {
       fill: ${({ theme }) => theme.colors.neutral700};
       width: ${12 / 16}rem;
@@ -42,19 +39,8 @@ export const ExpandButton = styled(BaseButton)`
 
 export const EditorLayout = ({ children, isExpandMode, error, previewContent, onCollapse }) => {
   const { formatMessage } = useIntl();
-  useEffect(() => {
-    const body = document.body;
-
-    if (isExpandMode) {
-      body.classList.add('lock-body-scroll');
-    }
 
-    return () => {
-      if (isExpandMode) {
-        body.classList.remove('lock-body-scroll');
-      }
-    };
-  }, [isExpandMode]);
+  useLockScroll(isExpandMode);
 
   if (isExpandMode) {
     return (
@@ -71,7 +57,6 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
             onClick={onCollapse}
           >
             <Box
-              id="wysiwyg-expand"
               background="neutral0"
               hasRadius
               shadow="popupShadow"
@@ -84,9 +69,15 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
                 <BoxWithBorder flex="1" height="100%">
                   {children}
                 </BoxWithBorder>
-                <Box flex="1" height="100%">
-                  <Flex height={pxToRem(48)} background="neutral100" justifyContent="flex-end">
-                    <ExpandButton id="collapse" onClick={onCollapse}>
+                <Flex alignItems="start" direction="column" flex={1} height="100%" width="100%">
+                  <Flex
+                    height={pxToRem(48)}
+                    background="neutral100"
+                    justifyContent="flex-end"
+                    shrink={0}
+                    width="100%"
+                  >
+                    <ExpandButton onClick={onCollapse}>
                       <Typography>
                         {formatMessage({
                           id: 'components.Wysiwyg.collapse',
@@ -97,10 +88,10 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
                     </ExpandButton>
                   </Flex>
 
-                  <Box position="relative" height="100%">
+                  <Box position="relative" height="100%" width="100%">
                     <PreviewWysiwyg data={previewContent} />
                   </Box>
-                </Box>
+                </Flex>
               </Flex>
             </Box>
           </ExpandWrapper>

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

@@ -31,7 +31,7 @@ const TypographyAsterisk = styled(Typography)`
 `;
 
 const Wysiwyg = ({
-  description,
+  hint,
   disabled,
   error,
   intlLabel,
@@ -167,7 +167,7 @@ const Wysiwyg = ({
 
           {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}
         </EditorLayout>
-        <Hint description={description} name={name} error={error} />
+        <Hint hint={hint} name={name} error={error} />
       </Stack>
 
       {error && (
@@ -186,21 +186,17 @@ const Wysiwyg = ({
 };
 
 Wysiwyg.defaultProps = {
-  description: null,
   disabled: false,
   error: '',
   labelAction: undefined,
   placeholder: null,
   required: false,
   value: '',
+  hint: '',
 };
 
 Wysiwyg.propTypes = {
-  description: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   disabled: PropTypes.bool,
   error: PropTypes.string,
   intlLabel: PropTypes.shape({

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),
+    []
+  );
+};

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

@@ -123,7 +123,7 @@ export const useDragAndDrop = (
     }),
   });
 
-  const handleKeyDown = useKeyboardDragAndDrop(index, {
+  const handleKeyDown = useKeyboardDragAndDrop(active, index, {
     onGrabItem,
     onDropItem,
     onCancel,

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

@@ -17,9 +17,13 @@ import { useState } from 'react';
  *
  * @internal - You should use `useDragAndDrop` instead.
  *
- * @type {(index: number, callbacks: UseKeyboardDragAndDropCallbacks) => (event: React.KeyboardEvent<HTMLButtonElement>) => void}
+ * @type {(active: boolean, index: number, callbacks: UseKeyboardDragAndDropCallbacks) => (event: React.KeyboardEvent<HTMLButtonElement>) => void}
  */
-export const useKeyboardDragAndDrop = (index, { onCancel, onDropItem, onGrabItem, onMoveItem }) => {
+export const useKeyboardDragAndDrop = (
+  active,
+  index,
+  { onCancel, onDropItem, onGrabItem, onMoveItem }
+) => {
   const [isSelected, setIsSelected] = useState(false);
   /**
    * @type {(movement: 'UP' | 'DOWN') => void})}
@@ -64,6 +68,10 @@ export const useKeyboardDragAndDrop = (index, { onCancel, onDropItem, onGrabItem
    * @type {React.KeyboardEventHandler<HTMLButtonElement>}
    */
   const handleKeyDown = (e) => {
+    if (!active) {
+      return;
+    }
+
     if (e.key === 'Tab' && !isSelected) {
       return;
     }