@strapi/admin 4.5.0-beta.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/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

@@ -4,7 +4,7 @@ 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';
@@ -21,6 +21,7 @@ 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;
@@ -61,12 +62,11 @@ const RelationInput = ({
   labelLoadMore,
   labelDisconnectRelation,
   loadingMessage,
-  onRelationAdd,
+  noRelationsMessage,
+  onRelationConnect,
   onRelationLoadMore,
-  onRelationRemove,
-  onSearchClose,
+  onRelationDisconnect,
   onSearchNextPage,
-  onSearchOpen,
   onSearch,
   placeholder,
   publicationStateTranslations,
@@ -80,11 +80,9 @@ const RelationInput = ({
   const outerListRef = useRef();
   const [overflow, setOverflow] = useState('');
 
-  const {
-    data: { pages },
-  } = searchResults;
+  const { data } = searchResults;
 
-  const relations = useMemo(() => paginatedRelations.data.pages.flat(), [paginatedRelations]);
+  const relations = paginatedRelations.data;
   const totalNumberOfRelations = relations.length ?? 0;
 
   const dynamicListHeight = useMemo(
@@ -102,12 +100,15 @@ const RelationInput = ({
 
   const options = useMemo(
     () =>
-      pages.flat().map((result) => ({
-        ...result,
-        value: result.id,
-        label: result.mainField,
-      })),
-    [pages]
+      data
+        .flat()
+        .filter(Boolean)
+        .map((result) => ({
+          ...result,
+          value: result.id,
+          label: result.mainField,
+        })),
+    [data]
   );
 
   useEffect(() => {
@@ -197,17 +198,38 @@ const RelationInput = ({
 
   const handleMenuClose = () => {
     setIsMenuOpen(false);
-
-    if (onSearchClose) {
-      onSearchClose();
-    }
   };
 
   const handleMenuOpen = () => {
     setIsMenuOpen(true);
-    onSearchOpen();
+    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
@@ -231,17 +253,11 @@ 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);
@@ -250,6 +266,7 @@ const RelationInput = ({
               onMenuClose={handleMenuClose}
               onMenuOpen={handleMenuOpen}
               menuIsOpen={isMenuOpen}
+              noOptionsMessage={() => noRelationsMessage}
               onMenuScrollToBottom={() => {
                 if (searchResults.hasNextPage) {
                   onSearchNextPage();
@@ -265,7 +282,7 @@ const RelationInput = ({
           shouldDisplayLoadMoreButton && (
             <TextButton
               disabled={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
-              onClick={() => onRelationLoadMore()}
+              onClick={handleLoadMore}
               loading={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
               startIcon={<Refresh />}
             >
@@ -286,7 +303,7 @@ 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
@@ -297,7 +314,7 @@ const RelationInput = ({
                       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} />
@@ -320,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>
               );
@@ -346,37 +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,
@@ -388,10 +394,9 @@ RelationInput.defaultProps = {
   error: undefined,
   labelAction: null,
   labelLoadMore: null,
-  onSearchClose: undefined,
   required: false,
-  relations: [],
-  searchResults: [],
+  relations: { data: [] },
+  searchResults: { data: [] },
 };
 
 RelationInput.propTypes = {
@@ -403,25 +408,24 @@ RelationInput.propTypes = {
   labelAction: PropTypes.element,
   labelLoadMore: PropTypes.string,
   labelDisconnectRelation: PropTypes.string.isRequired,
-  loadingMessage: PropTypes.func.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,
-  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/RelationInputDataManager/RelationInputDataManager.js

@@ -1,18 +1,25 @@
+/* eslint-disable no-nested-ternary */
 import PropTypes from 'prop-types';
-import React, { memo, useEffect, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
+import pick from 'lodash/pick';
 
 import { useCMEditViewDataManager, NotAllowedInput } from '@strapi/helper-plugin';
 
 import { RelationInput } from '../RelationInput';
+
 import { useRelation } from '../../hooks/useRelation';
-import { connect, select, normalizeRelations, normalizeSearchResults } from './utils';
-import { PUBLICATION_STATES, RELATIONS_TO_DISPLAY, SEARCH_RESULTS_TO_DISPLAY } from './constants';
+
 import { getTrad } from '../../utils';
 
+import { PUBLICATION_STATES, RELATIONS_TO_DISPLAY, SEARCH_RESULTS_TO_DISPLAY } from './constants';
+import { connect, select, normalizeSearchResults, diffRelations, normalizeRelation } from './utils';
+
 export const RelationInputDataManager = ({
+  error,
   componentId,
+  isComponentRelation,
   editable,
   description,
   intlLabel,
@@ -33,58 +40,41 @@ export const RelationInputDataManager = ({
   const { connectRelation, disconnectRelation, loadRelation, modifiedData, slug, initialData } =
     useCMEditViewDataManager();
 
+  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,
     relation: {
-      enabled: get(initialData, name)?.count !== 0 && !!endpoints.relation,
+      enabled: !!endpoints.relation,
       endpoint: endpoints.relation,
+      pageGoal: currentLastPage,
       pageParams: {
         ...defaultParams,
         pageSize: RELATIONS_TO_DISPLAY,
       },
+      onLoad: loadRelation,
+      normalizeArguments: {
+        mainFieldName: mainField.name,
+        shouldAddLink: shouldDisplayRelationLink,
+        targetModel,
+      },
     },
 
     search: {
       endpoint: endpoints.search,
       pageParams: {
         ...defaultParams,
-        entityId: isCreatingEntry ? undefined : componentId ?? initialData.id,
+        // eslint-disable-next-line no-nested-ternary
+        entityId: isCreatingEntry ? undefined : isComponentRelation ? componentId : initialData.id,
         pageSize: SEARCH_RESULTS_TO_DISPLAY,
       },
     },
   });
 
-  const relationsFromModifiedData = get(modifiedData, name);
-  const stringifiedRelations = JSON.stringify(relations);
-  const normalizedRelations = useMemo(
-    () =>
-      normalizeRelations(relations, {
-        modifiedData: relationsFromModifiedData,
-        mainFieldName: mainField.name,
-        shouldAddLink: shouldDisplayRelationLink,
-        targetModel,
-      }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      stringifiedRelations,
-      modifiedData,
-      name,
-      mainField.name,
-      shouldDisplayRelationLink,
-      targetModel,
-    ]
-  );
-
-  useEffect(() => {
-    if (relations.status === 'success') {
-      loadRelation({
-        target: { name, value: normalizedRelations.data.pages.flat() },
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loadRelation, relations.status, stringifiedRelations, name]);
-
   const isMorph = useMemo(() => relationType.toLowerCase().includes('morph'), [relationType]);
-  const isSingleRelation = [
+  const toOneRelation = [
     'oneWay',
     'oneToOne',
     'manyToOne',
@@ -104,29 +94,36 @@ export const RelationInputDataManager = ({
     return !editable;
   }, [isMorph, isCreatingEntry, editable, isFieldAllowed, isFieldReadable]);
 
-  const handleRelationAdd = (relation) => {
-    connectRelation({ target: { name, value: relation, replace: isSingleRelation } });
+  const handleRelationConnect = (relation) => {
+    /**
+     * Any relation being added to the store should be normalized so it has it's link.
+     */
+    const normalizedRelation = normalizeRelation(relation, {
+      mainFieldName: mainField.name,
+      shouldAddLink: shouldDisplayRelationLink,
+      targetModel,
+    });
+
+    connectRelation({ name, value: normalizedRelation, toOneRelation });
   };
 
-  const handleRelationRemove = (relation) => {
-    disconnectRelation({ target: { name, value: relation } });
+  const handleRelationDisconnect = (relation) => {
+    disconnectRelation({ name, id: relation.id });
   };
 
   const handleRelationLoadMore = () => {
     relations.fetchNextPage();
   };
 
-  const handleSearch = (term) => {
-    searchFor(term, {
-      idsToInclude: relationsFromModifiedData?.disconnect?.map((relation) => relation.id),
-      idsToOmit: relationsFromModifiedData?.connect?.map((relation) => relation.id),
-    });
-  };
+  const handleSearch = (term = '') => {
+    const [connected, disconnected] = diffRelations(
+      relationsFromModifiedData,
+      get(initialData, name)
+    );
 
-  const handleOpenSearch = () => {
-    searchFor('', {
-      idsToInclude: relationsFromModifiedData?.disconnect?.map((relation) => relation.id),
-      idsToOmit: relationsFromModifiedData?.connect?.map((relation) => relation.id),
+    searchFor(term, {
+      idsToInclude: disconnected,
+      idsToOmit: connected,
     });
   };
 
@@ -138,18 +135,41 @@ export const RelationInputDataManager = ({
     (!isFieldAllowed && isCreatingEntry) ||
     (!isCreatingEntry && !isFieldAllowed && !isFieldReadable)
   ) {
-    return <NotAllowedInput intlLabel={intlLabel} labelAction={labelAction} />;
+    return <NotAllowedInput name={name} intlLabel={intlLabel} labelAction={labelAction} />;
   }
 
+  /**
+   * How to calculate the total number of relations even if you don't
+   * have them all loaded in the browser.
+   *
+   * 1. The `infiniteQuery` gives you the total number of relations in the pagination result.
+   * 2. You can diff the length of the browserState vs the fetchedServerState to determine if you've
+   * either added or removed relations.
+   * 3. Add them together, if you've removed relations you'll get a negative number and it'll
+   * 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 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
+   * that the browser count is correct because we've just _made_ this entry and the in-component hook is now fetching.
+   */
+  const totalRelations =
+    !relations.data && browserRelationsCount === serverRelationsCount
+      ? browserRelationsCount
+      : browserRelationsCount - serverRelationsCount + realServerRelationsCount;
+
   return (
     <RelationInput
+      error={error}
       description={description}
       disabled={isDisabled}
       id={name}
       label={`${formatMessage({
         id: intlLabel.id,
         defaultMessage: intlLabel.defaultMessage,
-      })} ${initialData[name]?.count !== undefined ? `(${initialData[name].count})` : ''}`}
+      })} ${totalRelations > 0 ? `(${totalRelations})` : ''}`}
       labelAction={labelAction}
       labelLoadMore={
         !isCreatingEntry
@@ -164,20 +184,21 @@ export const RelationInputDataManager = ({
         defaultMessage: 'Remove',
       })}
       listHeight={320}
-      loadingMessage={() =>
-        formatMessage({
-          id: getTrad('relation.isLoading'),
-          defaultMessage: 'Relations are loading',
-        })
-      }
+      loadingMessage={formatMessage({
+        id: getTrad('relation.isLoading'),
+        defaultMessage: 'Relations are loading',
+      })}
       name={name}
+      noRelationsMessage={formatMessage({
+        id: getTrad('relation.notAvailable'),
+        defaultMessage: 'No relations available',
+      })}
       numberOfRelationsToDisplay={RELATIONS_TO_DISPLAY}
-      onRelationAdd={(relation) => handleRelationAdd(relation)}
-      onRelationRemove={(relation) => handleRelationRemove(relation)}
+      onRelationConnect={(relation) => handleRelationConnect(relation)}
+      onRelationDisconnect={(relation) => handleRelationDisconnect(relation)}
       onRelationLoadMore={() => handleRelationLoadMore()}
       onSearch={(term) => handleSearch(term)}
       onSearchNextPage={() => handleSearchMore()}
-      onSearchOpen={handleOpenSearch}
       placeholder={formatMessage(
         placeholder || {
           id: getTrad('relation.add'),
@@ -195,7 +216,14 @@ export const RelationInputDataManager = ({
           defaultMessage: 'Published',
         }),
       }}
-      relations={normalizedRelations}
+      relations={pick(
+        { ...relations, data: relationsFromModifiedData },
+        'data',
+        'hasNextPage',
+        'isFetchingNextPage',
+        'isLoading',
+        'isSuccess'
+      )}
       required={required}
       searchResults={normalizeSearchResults(search, {
         mainFieldName: mainField.name,
@@ -208,8 +236,10 @@ export const RelationInputDataManager = ({
 RelationInputDataManager.defaultProps = {
   componentId: undefined,
   editable: true,
+  error: undefined,
   description: '',
   labelAction: null,
+  isComponentRelation: false,
   isFieldAllowed: true,
   placeholder: null,
   required: false,
@@ -218,6 +248,7 @@ RelationInputDataManager.defaultProps = {
 RelationInputDataManager.propTypes = {
   componentId: PropTypes.number,
   editable: PropTypes.bool,
+  error: PropTypes.string,
   description: PropTypes.string,
   intlLabel: PropTypes.shape({
     id: PropTypes.string.isRequired,
@@ -226,6 +257,7 @@ RelationInputDataManager.propTypes = {
   }).isRequired,
   labelAction: PropTypes.element,
   isCreatingEntry: PropTypes.bool.isRequired,
+  isComponentRelation: PropTypes.bool,
   isFieldAllowed: PropTypes.bool,
   isFieldReadable: PropTypes.bool.isRequired,
   mainField: PropTypes.shape({
@@ -246,7 +278,7 @@ RelationInputDataManager.propTypes = {
   targetModel: PropTypes.string.isRequired,
   queryInfos: PropTypes.shape({
     defaultParams: PropTypes.shape({
-      _component: PropTypes.string,
+      locale: PropTypes.string,
     }),
     endpoints: PropTypes.shape({
       relation: PropTypes.string,

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

@@ -0,0 +1,24 @@
+/**
+ * @param {Array<{id: string}>} browserStateRelations
+ * @param {Array<{id: string}>} serverStateRelations
+ * @returns {[connected: string[], disconnected: string[]]} – the connected and disconnected relations ids
+ */
+export const diffRelations = (browserStateRelations = [], serverStateRelations = []) => {
+  const connected = browserStateRelations.reduce((acc, relation) => {
+    if (!serverStateRelations.find((oldRelation) => oldRelation.id === relation.id)) {
+      return [...acc, relation.id];
+    }
+
+    return acc;
+  }, []);
+
+  const disconnected = serverStateRelations.reduce((acc, relation) => {
+    if (!browserStateRelations.find((oldRelation) => oldRelation.id === relation.id)) {
+      return [...acc, relation.id];
+    }
+
+    return acc;
+  }, []);
+
+  return [connected, disconnected];
+};

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

@@ -1,4 +1,5 @@
 export { default as connect } from './connect';
 export { default as select } from './select';
-export { normalizeRelations } from './normalizeRelations';
+export { normalizeRelations, normalizeRelation } from './normalizeRelations';
 export { normalizeSearchResults } from './normalizeSearchResults';
+export { diffRelations } from './diffRelations';