@strapi/admin 4.5.0-alpha.0 → 4.5.0

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

@@ -1,5 +1,5 @@
 /* eslint-disable  import/no-cycle */
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import size from 'lodash/size';
 import isEqual from 'react-fast-compare';
@@ -17,6 +17,7 @@ import RepeatableComponent from '../RepeatableComponent';
 import connect from './utils/connect';
 import select from './utils/select';
 import Label from './Label';
+import { useContentTypeLayout } from '../../hooks';
 
 const FieldComponent = ({
   addNonRepeatableComponentToField,
@@ -46,6 +47,12 @@ const FieldComponent = ({
   const showResetComponent =
     !isRepeatable && isInitialized && !isFromDynamicZone && hasChildrenAllowedFields;
 
+  const { getComponentLayout, components } = useContentTypeLayout();
+  const componentLayoutData = useMemo(
+    () => getComponentLayout(componentUid),
+    [componentUid, getComponentLayout]
+  );
+
   if (!hasChildrenAllowedFields && isCreatingEntry) {
     return <NotAllowedInput labelAction={labelAction} intlLabel={intlLabel} name={name} />;
   }
@@ -55,7 +62,7 @@ const FieldComponent = ({
   }
 
   const handleClickAddNonRepeatableComponentToField = () => {
-    addNonRepeatableComponentToField(name, componentUid);
+    addNonRepeatableComponentToField(name, componentLayoutData, components);
   };
 
   return (

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box';
+import { useCustomFields } from '@strapi/helper-plugin';
 import Date from '@strapi/icons/Date';
 import Boolean from '@strapi/icons/Boolean';
 import Email from '@strapi/icons/Email';
@@ -40,10 +42,38 @@ const iconByTypes = {
   dynamiczone: <DynamicZone />,
 };
 
-const FieldTypeIcon = ({ type }) => iconByTypes[type] || null;
+const FieldTypeIcon = ({ type, customFieldUid }) => {
+  const customFieldsRegistry = useCustomFields();
+
+  let Compo = iconByTypes[type];
+
+  if (customFieldUid) {
+    const customField = customFieldsRegistry.get(customFieldUid);
+    const CustomFieldIcon = customField.icon;
+
+    if (CustomFieldIcon) {
+      Compo = (
+        <Box marginRight={3} width={7} height={6}>
+          <CustomFieldIcon />
+        </Box>
+      );
+    }
+  }
+
+  if (!iconByTypes[type]) {
+    return null;
+  }
+
+  return Compo;
+};
+
+FieldTypeIcon.defaultProps = {
+  customFieldUid: null,
+};
 
 FieldTypeIcon.propTypes = {
   type: PropTypes.string.isRequired,
+  customFieldUid: PropTypes.string,
 };
 
 export default FieldTypeIcon;

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

@@ -5,16 +5,14 @@ import get from 'lodash/get';
 import omit from 'lodash/omit';
 import take from 'lodash/take';
 import isEqual from 'react-fast-compare';
-import { GenericInput, NotAllowedInput, useLibrary } from '@strapi/helper-plugin';
-
+import { GenericInput, NotAllowedInput, useLibrary, useCustomFields } from '@strapi/helper-plugin';
+import { useContentTypeLayout } from '../../hooks';
+import { getFieldName } from '../../utils';
 import Wysiwyg from '../Wysiwyg';
 import InputJSON from '../InputJSON';
 import InputUID from '../InputUID';
 import { RelationInputDataManager } from '../RelationInputDataManager';
 
-import { useContentTypeLayout } from '../../hooks';
-import { getFieldName } from '../../utils';
-
 import {
   connect,
   generateOptions,
@@ -26,6 +24,7 @@ import {
 
 function Inputs({
   allowedFields,
+  componentUid,
   fieldSchema,
   formErrors,
   isCreatingEntry,
@@ -42,9 +41,10 @@ function Inputs({
   const { fields } = useLibrary();
   const { formatMessage } = useIntl();
   const { contentType: currentContentTypeLayout } = useContentTypeLayout();
+  const customFieldsRegistry = useCustomFields();
 
   const disabled = useMemo(() => !get(metadatas, 'editable', true), [metadatas]);
-  const type = fieldSchema.type;
+  const { type, customField: customFieldUid } = fieldSchema;
   const error = get(formErrors, [keys], null);
 
   const fieldName = useMemo(() => {
@@ -194,6 +194,19 @@ function Inputs({
     return minutes % metadatas.step === 0 ? metadatas.step : step;
   }, [inputType, inputValue, metadatas.step, step]);
 
+  // Memoize the component to avoid remounting it and losing state
+  const CustomFieldInput = useMemo(() => {
+    if (customFieldUid) {
+      const customField = customFieldsRegistry.get(customFieldUid);
+      const CustomFieldInput = React.lazy(customField.components.Input);
+
+      return CustomFieldInput;
+    }
+
+    // Not a custom field, component won't be used
+    return null;
+  }, [customFieldUid, customFieldsRegistry]);
+
   if (visible === false) {
     return null;
   }
@@ -216,6 +229,7 @@ function Inputs({
       <RelationInputDataManager
         {...metadatas}
         {...fieldSchema}
+        componentUid={componentUid}
         description={
           metadatas.description
             ? formatMessage({
@@ -248,6 +262,18 @@ function Inputs({
     );
   }
 
+  const customInputs = {
+    json: InputJSON,
+    uid: InputUID,
+    media: fields.media,
+    wysiwyg: Wysiwyg,
+    ...fields,
+  };
+
+  if (customFieldUid) {
+    customInputs[customFieldUid] = CustomFieldInput;
+  }
+
   return (
     <GenericInput
       attribute={fieldSchema}
@@ -260,13 +286,7 @@ function Inputs({
       error={error}
       labelAction={labelAction}
       contentTypeUID={currentContentTypeLayout.uid}
-      customInputs={{
-        json: InputJSON,
-        uid: InputUID,
-        media: fields.media,
-        wysiwyg: Wysiwyg,
-        ...fields,
-      }}
+      customInputs={customInputs}
       multiple={fieldSchema.multiple || false}
       name={keys}
       onChange={onChange}
@@ -274,7 +294,7 @@ function Inputs({
       placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
       required={fieldSchema.required || false}
       step={inputStep}
-      type={inputType}
+      type={customFieldUid || inputType}
       // validations={validations}
       value={inputValue}
       withDefaultValue={false}
@@ -283,6 +303,7 @@ function Inputs({
 }
 
 Inputs.defaultProps = {
+  componentUid: undefined,
   formErrors: {},
   labelAction: undefined,
   size: undefined,
@@ -292,6 +313,7 @@ Inputs.defaultProps = {
 
 Inputs.propTypes = {
   allowedFields: PropTypes.array.isRequired,
+  componentUid: PropTypes.string,
   fieldSchema: PropTypes.object.isRequired,
   formErrors: PropTypes.object,
   keys: PropTypes.string.isRequired,

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

@@ -61,10 +61,12 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
                 return (
                   <GridItem col={size} key={fieldName} s={12} xs={12}>
                     <Inputs
+                      componentUid={componentUid}
                       keys={keys}
                       fieldSchema={fieldSchema}
                       metadatas={metadatas}
                       queryInfos={queryInfos}
+                      size={size}
                     />
                   </GridItem>
                 );

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

@@ -13,7 +13,7 @@ import sanitizeHtml from './utils/satinizeHtml';
 import Wrapper from './Wrapper';
 
 const PreviewWysiwyg = ({ data }) => {
-  const html = useMemo(() => sanitizeHtml(md.render(data || '')), [data]);
+  const html = useMemo(() => sanitizeHtml(md.render(data.replaceAll('\\n', '\n') || '')), [data]);
 
   return (
     <Wrapper>

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

@@ -1,10 +1,10 @@
 import React, { useRef, useState, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import styled, { keyframes } from 'styled-components';
+import styled from 'styled-components';
 import { FixedSizeList as List } from 'react-window';
 
 import { ReactSelect } from '@strapi/helper-plugin';
-import { Badge } from '@strapi/design-system/Badge';
+import { Status } from '@strapi/design-system/Status';
 import { Box } from '@strapi/design-system/Box';
 import { Link } from '@strapi/design-system/Link';
 import { Icon } from '@strapi/design-system/Icon';
@@ -15,13 +15,13 @@ import { Tooltip } from '@strapi/design-system/Tooltip';
 
 import Cross from '@strapi/icons/Cross';
 import Refresh from '@strapi/icons/Refresh';
-import Loader from '@strapi/icons/Loader';
 
 import { Relation } from './components/Relation';
 import { RelationItem } from './components/RelationItem';
 import { RelationList } from './components/RelationList';
 import { Option } from './components/Option';
 import { RELATION_ITEM_HEIGHT } from './constants';
+import { usePrev } from '../../hooks';
 
 const LinkEllipsis = styled(Link)`
   white-space: nowrap;
@@ -39,19 +39,15 @@ const BoxEllipsis = styled(Box)`
   }
 `;
 
-const rotation = keyframes`
-  from {
-    transform: rotate(0deg);
+const DisconnectButton = styled.button`
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral500};
   }
-  to {
-    transform: rotate(359deg);
-  }
-`;
 
-// TODO - to replace with loading prop on TextButton after DS release
-const LoaderWrapper = styled(Box)`
-  animation: ${rotation} 2s infinite linear;
-  will-change: transform;
+  &:hover svg path,
+  &:focus svg path {
+    fill: ${({ theme }) => theme.colors.neutral600};
+  }
 `;
 
 const RelationInput = ({
@@ -64,13 +60,13 @@ const RelationInput = ({
   label,
   labelAction,
   labelLoadMore,
+  labelDisconnectRelation,
   loadingMessage,
-  onRelationAdd,
+  noRelationsMessage,
+  onRelationConnect,
   onRelationLoadMore,
-  onRelationRemove,
-  onSearchClose,
+  onRelationDisconnect,
   onSearchNextPage,
-  onSearchOpen,
   onSearch,
   placeholder,
   publicationStateTranslations,
@@ -84,7 +80,9 @@ const RelationInput = ({
   const outerListRef = useRef();
   const [overflow, setOverflow] = useState('');
 
-  const relations = useMemo(() => paginatedRelations.data.pages.flat(), [paginatedRelations]);
+  const { data } = searchResults;
+
+  const relations = paginatedRelations.data;
   const totalNumberOfRelations = relations.length ?? 0;
 
   const dynamicListHeight = useMemo(
@@ -102,12 +100,15 @@ const RelationInput = ({
 
   const options = useMemo(
     () =>
-      searchResults.data.pages.flat().map((result) => ({
-        ...result,
-        value: result.id,
-        label: result.mainField,
-      })),
-    [searchResults]
+      data
+        .flat()
+        .filter(Boolean)
+        .map((result) => ({
+          ...result,
+          value: result.id,
+          label: result.mainField,
+        })),
+    [data]
   );
 
   useEffect(() => {
@@ -143,6 +144,92 @@ const RelationInput = ({
     };
   }, [paginatedRelations, relations, numberOfRelationsToDisplay, totalNumberOfRelations]);
 
+  /**
+   * This code is being isolated because it's a hack to fix a placement bug in
+   * `react-select` where when the options prop is updated the position of the
+   * menu is not recalculated.
+   */
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const timeoutRef = useRef();
+  const previousOptions = useRef([]);
+
+  useEffect(() => {
+    /**
+     * We only really want this effect to fire once when the options
+     * change from an empty array to an array with values.
+     * Otherwise, it'll fire when the infinite scrolling happens causing
+     * the menu to jump to the top all the time when loading more.
+     */
+    if (options.length > 0 && previousOptions.current.length === 0) {
+      setIsMenuOpen((isCurrentlyOpened) => {
+        /**
+         * If we're currently open and the options changed
+         * we want to close and open to ensure the menu's
+         * position is correctly calculated
+         */
+        if (isCurrentlyOpened) {
+          timeoutRef.current = setTimeout(() => {
+            setIsMenuOpen(true);
+          }, 10);
+
+          return false;
+        }
+
+        return false;
+      });
+    }
+
+    return () => {
+      previousOptions.current = options || [];
+    };
+  }, [options]);
+
+  useEffect(() => {
+    return () => {
+      /**
+       * If the component unmounts and a timer is set we should clear that timer
+       */
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleMenuClose = () => {
+    setIsMenuOpen(false);
+  };
+
+  const handleMenuOpen = () => {
+    setIsMenuOpen(true);
+    onSearch();
+  };
+
+  const previewRelationsLength = usePrev(relations.length);
+  /**
+   * @type {React.MutableRefObject<'onChange' | 'loadMore'>}
+   */
+  const updatedRelationsWith = useRef();
+
+  const handleLoadMore = () => {
+    updatedRelationsWith.current = 'loadMore';
+    onRelationLoadMore();
+  };
+
+  useEffect(() => {
+    if (
+      updatedRelationsWith.current === 'onChange' &&
+      relations.length !== previewRelationsLength
+    ) {
+      listRef.current.scrollToItem(relations.length, 'end');
+    } else if (
+      updatedRelationsWith.current === 'loadMore' &&
+      relations.length !== previewRelationsLength
+    ) {
+      listRef.current.scrollToItem(0, 'start');
+    }
+  }, [previewRelationsLength, relations]);
+
   return (
     <Field error={error} name={name} hint={description} id={id}>
       <Relation
@@ -157,6 +244,7 @@ const RelationInput = ({
               // position fixed doesn't update position on scroll
               // react select doesn't update menu position on options change
               menuPosition="absolute"
+              menuPlacement="auto"
               components={{ Option }}
               options={options}
               isDisabled={disabled}
@@ -165,24 +253,20 @@ const RelationInput = ({
               inputId={id}
               isSearchable
               isClear
-              loadingMessage={loadingMessage}
+              loadingMessage={() => loadingMessage}
               onChange={(relation) => {
                 setValue(null);
-                onRelationAdd(relation);
-
-                // scroll to the end of the list
-                if (relations.length > 0) {
-                  setTimeout(() => {
-                    listRef.current.scrollToItem(relations.length, 'end');
-                  });
-                }
+                onRelationConnect(relation);
+                updatedRelationsWith.current = 'onChange';
               }}
               onInputChange={(value) => {
                 setValue(value);
                 onSearch(value);
               }}
-              onMenuClose={onSearchClose}
-              onMenuOpen={onSearchOpen}
+              onMenuClose={handleMenuClose}
+              onMenuOpen={handleMenuOpen}
+              menuIsOpen={isMenuOpen}
+              noOptionsMessage={() => noRelationsMessage}
               onMenuScrollToBottom={() => {
                 if (searchResults.hasNextPage) {
                   onSearchNextPage();
@@ -197,18 +281,10 @@ const RelationInput = ({
         loadMore={
           shouldDisplayLoadMoreButton && (
             <TextButton
-              disabled={paginatedRelations.isLoading}
-              onClick={() => onRelationLoadMore()}
-              startIcon={
-                paginatedRelations.isLoading ? (
-                  // TODO: To replace with loading prop on TextButton after DS release
-                  <LoaderWrapper>
-                    <Loader />
-                  </LoaderWrapper>
-                ) : (
-                  <Refresh />
-                )
-              }
+              disabled={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
+              onClick={handleLoadMore}
+              loading={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
+              startIcon={<Refresh />}
             >
               {labelLoadMore}
             </TextButton>
@@ -227,26 +303,27 @@ const RelationInput = ({
           >
             {({ data, index, style }) => {
               const { publicationState, href, mainField, id } = data[index];
-              const badgeColor = publicationState === 'draft' ? 'secondary' : 'success';
+              const statusColor = publicationState === 'draft' ? 'secondary' : 'success';
 
               return (
                 <RelationItem
                   disabled={disabled}
                   key={`relation-${name}-${id}`}
                   endAction={
-                    <button
+                    <DisconnectButton
                       data-testid={`remove-relation-${id}`}
                       disabled={disabled}
                       type="button"
-                      onClick={() => onRelationRemove(data[index])}
+                      onClick={() => onRelationDisconnect(data[index])}
+                      aria-label={labelDisconnectRelation}
                     >
                       <Icon width="12px" as={Cross} />
-                    </button>
+                    </DisconnectButton>
                   }
                   style={style}
                 >
                   <BoxEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
-                    <Tooltip description={mainField ?? id}>
+                    <Tooltip description={mainField ?? `${id}`}>
                       {href ? (
                         <LinkEllipsis to={href} disabled={disabled}>
                           {mainField ?? id}
@@ -260,15 +337,11 @@ const RelationInput = ({
                   </BoxEllipsis>
 
                   {publicationState && (
-                    <Badge
-                      borderSize={1}
-                      borderColor={`${badgeColor}200`}
-                      backgroundColor={`${badgeColor}100`}
-                      textColor={`${badgeColor}700`}
-                      shrink={0}
-                    >
-                      {publicationStateTranslations[publicationState]}
-                    </Badge>
+                    <Status variant={statusColor} showBullet={false} size="S">
+                      <Typography fontWeight="bold" textColor={`${statusColor}700`}>
+                        {publicationStateTranslations[publicationState]}
+                      </Typography>
+                    </Status>
                   )}
                 </RelationItem>
               );
@@ -286,36 +359,30 @@ const RelationInput = ({
   );
 };
 
-const ReactQueryRelationResult = PropTypes.shape({
-  data: PropTypes.shape({
-    pages: PropTypes.arrayOf(
-      PropTypes.arrayOf(
-        PropTypes.shape({
-          href: PropTypes.string,
-          id: PropTypes.number.isRequired,
-          publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-          mainField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        })
-      )
-    ),
-  }),
+const RelationsResult = PropTypes.shape({
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      href: PropTypes.string,
+      id: PropTypes.number.isRequired,
+      publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+      mainField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    })
+  ),
   hasNextPage: PropTypes.bool,
+  isFetchingNextPage: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
   isSuccess: PropTypes.bool.isRequired,
 });
 
-const ReactQuerySearchResult = PropTypes.shape({
-  data: PropTypes.shape({
-    pages: PropTypes.arrayOf(
-      PropTypes.arrayOf(
-        PropTypes.shape({
-          id: PropTypes.number.isRequired,
-          mainField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-          publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-        })
-      )
-    ),
-  }),
+const SearchResults = PropTypes.shape({
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      href: PropTypes.string,
+      mainField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    })
+  ),
   hasNextPage: PropTypes.bool,
   isLoading: PropTypes.bool.isRequired,
   isSuccess: PropTypes.bool.isRequired,
@@ -328,8 +395,8 @@ RelationInput.defaultProps = {
   labelAction: null,
   labelLoadMore: null,
   required: false,
-  relations: [],
-  searchResults: [],
+  relations: { data: [] },
+  searchResults: { data: [] },
 };
 
 RelationInput.propTypes = {
@@ -340,25 +407,25 @@ RelationInput.propTypes = {
   label: PropTypes.string.isRequired,
   labelAction: PropTypes.element,
   labelLoadMore: PropTypes.string,
-  loadingMessage: PropTypes.func.isRequired,
+  labelDisconnectRelation: PropTypes.string.isRequired,
+  loadingMessage: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
+  noRelationsMessage: PropTypes.string.isRequired,
   numberOfRelationsToDisplay: PropTypes.number.isRequired,
-  onRelationAdd: PropTypes.func.isRequired,
-  onRelationRemove: PropTypes.func.isRequired,
+  onRelationConnect: PropTypes.func.isRequired,
+  onRelationDisconnect: PropTypes.func.isRequired,
   onRelationLoadMore: PropTypes.func.isRequired,
   onSearch: PropTypes.func.isRequired,
   onSearchNextPage: PropTypes.func.isRequired,
-  onSearchClose: PropTypes.func.isRequired,
-  onSearchOpen: PropTypes.func.isRequired,
   placeholder: PropTypes.string.isRequired,
   publicationStateTranslations: PropTypes.shape({
     draft: PropTypes.string.isRequired,
     published: PropTypes.string.isRequired,
   }).isRequired,
   required: PropTypes.bool,
-  searchResults: ReactQuerySearchResult,
+  searchResults: SearchResults,
   size: PropTypes.number.isRequired,
-  relations: ReactQueryRelationResult,
+  relations: RelationsResult,
 };
 
 export default RelationInput;

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

@@ -14,8 +14,8 @@ export const RelationItem = ({ children, disabled, endAction, style, ...props })
   return (
     <Box style={style} as="li">
       <Flex
-        paddingTop={3}
-        paddingBottom={3}
+        paddingTop={2}
+        paddingBottom={2}
         paddingLeft={4}
         paddingRight={4}
         hasRadius

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

@@ -1 +1 @@
-export const RELATION_ITEM_HEIGHT = 58;
+export const RELATION_ITEM_HEIGHT = 50;