@strapi/admin 4.5.0-alpha.0 → 4.5.0-beta.0

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

@@ -1,6 +1,6 @@
 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';
@@ -15,7 +15,6 @@ 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';
@@ -39,19 +38,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,6 +59,7 @@ const RelationInput = ({
   label,
   labelAction,
   labelLoadMore,
+  labelDisconnectRelation,
   loadingMessage,
   onRelationAdd,
   onRelationLoadMore,
@@ -84,6 +80,10 @@ const RelationInput = ({
   const outerListRef = useRef();
   const [overflow, setOverflow] = useState('');
 
+  const {
+    data: { pages },
+  } = searchResults;
+
   const relations = useMemo(() => paginatedRelations.data.pages.flat(), [paginatedRelations]);
   const totalNumberOfRelations = relations.length ?? 0;
 
@@ -102,12 +102,12 @@ const RelationInput = ({
 
   const options = useMemo(
     () =>
-      searchResults.data.pages.flat().map((result) => ({
+      pages.flat().map((result) => ({
         ...result,
         value: result.id,
         label: result.mainField,
       })),
-    [searchResults]
+    [pages]
   );
 
   useEffect(() => {
@@ -143,6 +143,71 @@ 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);
+
+    if (onSearchClose) {
+      onSearchClose();
+    }
+  };
+
+  const handleMenuOpen = () => {
+    setIsMenuOpen(true);
+    onSearchOpen();
+  };
+
   return (
     <Field error={error} name={name} hint={description} id={id}>
       <Relation
@@ -157,6 +222,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}
@@ -181,8 +247,9 @@ const RelationInput = ({
                 setValue(value);
                 onSearch(value);
               }}
-              onMenuClose={onSearchClose}
-              onMenuOpen={onSearchOpen}
+              onMenuClose={handleMenuClose}
+              onMenuOpen={handleMenuOpen}
+              menuIsOpen={isMenuOpen}
               onMenuScrollToBottom={() => {
                 if (searchResults.hasNextPage) {
                   onSearchNextPage();
@@ -197,18 +264,10 @@ const RelationInput = ({
         loadMore={
           shouldDisplayLoadMoreButton && (
             <TextButton
-              disabled={paginatedRelations.isLoading}
+              disabled={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
               onClick={() => onRelationLoadMore()}
-              startIcon={
-                paginatedRelations.isLoading ? (
-                  // TODO: To replace with loading prop on TextButton after DS release
-                  <LoaderWrapper>
-                    <Loader />
-                  </LoaderWrapper>
-                ) : (
-                  <Refresh />
-                )
-              }
+              loading={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
+              startIcon={<Refresh />}
             >
               {labelLoadMore}
             </TextButton>
@@ -234,19 +293,20 @@ const RelationInput = ({
                   disabled={disabled}
                   key={`relation-${name}-${id}`}
                   endAction={
-                    <button
+                    <DisconnectButton
                       data-testid={`remove-relation-${id}`}
                       disabled={disabled}
                       type="button"
                       onClick={() => onRelationRemove(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}
@@ -300,6 +360,7 @@ const ReactQueryRelationResult = PropTypes.shape({
     ),
   }),
   hasNextPage: PropTypes.bool,
+  isFetchingNextPage: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
   isSuccess: PropTypes.bool.isRequired,
 });
@@ -327,6 +388,7 @@ RelationInput.defaultProps = {
   error: undefined,
   labelAction: null,
   labelLoadMore: null,
+  onSearchClose: undefined,
   required: false,
   relations: [],
   searchResults: [],
@@ -340,6 +402,7 @@ RelationInput.propTypes = {
   label: PropTypes.string.isRequired,
   labelAction: PropTypes.element,
   labelLoadMore: PropTypes.string,
+  labelDisconnectRelation: PropTypes.string.isRequired,
   loadingMessage: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,
   numberOfRelationsToDisplay: PropTypes.number.isRequired,
@@ -348,7 +411,7 @@ RelationInput.propTypes = {
   onRelationLoadMore: PropTypes.func.isRequired,
   onSearch: PropTypes.func.isRequired,
   onSearchNextPage: PropTypes.func.isRequired,
-  onSearchClose: PropTypes.func.isRequired,
+  onSearchClose: PropTypes.func,
   onSearchOpen: PropTypes.func.isRequired,
   placeholder: PropTypes.string.isRequired,
   publicationStateTranslations: PropTypes.shape({

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;

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

@@ -1,16 +1,18 @@
 import PropTypes from 'prop-types';
 import React, { memo, useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl';
+import get from 'lodash/get';
 
-import { useCMEditViewDataManager, NotAllowedInput, useQueryParams } from '@strapi/helper-plugin';
+import { useCMEditViewDataManager, NotAllowedInput } from '@strapi/helper-plugin';
 
 import { RelationInput } from '../RelationInput';
 import { useRelation } from '../../hooks/useRelation';
-import { connect, select, normalizeRelations } from './utils';
+import { connect, select, normalizeRelations, normalizeSearchResults } from './utils';
 import { PUBLICATION_STATES, RELATIONS_TO_DISPLAY, SEARCH_RESULTS_TO_DISPLAY } from './constants';
 import { getTrad } from '../../utils';
 
-export const RelationInputDataManger = ({
+export const RelationInputDataManager = ({
+  componentId,
   editable,
   description,
   intlLabel,
@@ -30,15 +32,13 @@ export const RelationInputDataManger = ({
   const { formatMessage } = useIntl();
   const { connectRelation, disconnectRelation, loadRelation, modifiedData, slug, initialData } =
     useCMEditViewDataManager();
-  const [{ query }] = useQueryParams();
 
   const { relations, search, searchFor } = useRelation(`${slug}-${name}-${initialData?.id ?? ''}`, {
     relation: {
-      enabled: initialData[name]?.count !== 0 && !!endpoints.relation,
+      enabled: get(initialData, name)?.count !== 0 && !!endpoints.relation,
       endpoint: endpoints.relation,
       pageParams: {
         ...defaultParams,
-        locale: query?.plugins?.i18n?.locale,
         pageSize: RELATIONS_TO_DISPLAY,
       },
     },
@@ -47,18 +47,18 @@ export const RelationInputDataManger = ({
       endpoint: endpoints.search,
       pageParams: {
         ...defaultParams,
-        entityId: isCreatingEntry ? undefined : initialData.id,
-        locale: query?.plugins?.i18n?.locale,
+        entityId: isCreatingEntry ? undefined : componentId ?? initialData.id,
         pageSize: SEARCH_RESULTS_TO_DISPLAY,
       },
     },
   });
 
+  const relationsFromModifiedData = get(modifiedData, name);
   const stringifiedRelations = JSON.stringify(relations);
   const normalizedRelations = useMemo(
     () =>
       normalizeRelations(relations, {
-        modifiedData: modifiedData?.[name],
+        modifiedData: relationsFromModifiedData,
         mainFieldName: mainField.name,
         shouldAddLink: shouldDisplayRelationLink,
         targetModel,
@@ -117,11 +117,17 @@ export const RelationInputDataManger = ({
   };
 
   const handleSearch = (term) => {
-    searchFor(term, { idsToOmit: modifiedData?.[name]?.connect?.map((relation) => relation.id) });
+    searchFor(term, {
+      idsToInclude: relationsFromModifiedData?.disconnect?.map((relation) => relation.id),
+      idsToOmit: relationsFromModifiedData?.connect?.map((relation) => relation.id),
+    });
   };
 
   const handleOpenSearch = () => {
-    searchFor('', { idsToOmit: modifiedData?.[name]?.connect?.map((relation) => relation.id) });
+    searchFor('', {
+      idsToInclude: relationsFromModifiedData?.disconnect?.map((relation) => relation.id),
+      idsToOmit: relationsFromModifiedData?.connect?.map((relation) => relation.id),
+    });
   };
 
   const handleSearchMore = () => {
@@ -146,13 +152,17 @@ export const RelationInputDataManger = ({
       })} ${initialData[name]?.count !== undefined ? `(${initialData[name].count})` : ''}`}
       labelAction={labelAction}
       labelLoadMore={
-        // TODO: only display if there are more; derive from count
-        !isCreatingEntry &&
-        formatMessage({
-          id: getTrad('relation.loadMore'),
-          defaultMessage: 'Load More',
-        })
+        !isCreatingEntry
+          ? formatMessage({
+              id: getTrad('relation.loadMore'),
+              defaultMessage: 'Load More',
+            })
+          : null
       }
+      labelDisconnectRelation={formatMessage({
+        id: getTrad('relation.disconnect'),
+        defaultMessage: 'Remove',
+      })}
       listHeight={320}
       loadingMessage={() =>
         formatMessage({
@@ -167,7 +177,6 @@ export const RelationInputDataManger = ({
       onRelationLoadMore={() => handleRelationLoadMore()}
       onSearch={(term) => handleSearch(term)}
       onSearchNextPage={() => handleSearchMore()}
-      onSearchClose={() => {}}
       onSearchOpen={handleOpenSearch}
       placeholder={formatMessage(
         placeholder || {
@@ -188,7 +197,7 @@ export const RelationInputDataManger = ({
       }}
       relations={normalizedRelations}
       required={required}
-      searchResults={normalizeRelations(search, {
+      searchResults={normalizeSearchResults(search, {
         mainFieldName: mainField.name,
       })}
       size={size}
@@ -196,7 +205,8 @@ export const RelationInputDataManger = ({
   );
 };
 
-RelationInputDataManger.defaultProps = {
+RelationInputDataManager.defaultProps = {
+  componentId: undefined,
   editable: true,
   description: '',
   labelAction: null,
@@ -205,7 +215,8 @@ RelationInputDataManger.defaultProps = {
   required: false,
 };
 
-RelationInputDataManger.propTypes = {
+RelationInputDataManager.propTypes = {
+  componentId: PropTypes.number,
   editable: PropTypes.bool,
   description: PropTypes.string,
   intlLabel: PropTypes.shape({
@@ -245,6 +256,6 @@ RelationInputDataManger.propTypes = {
   }).isRequired,
 };
 
-const Memoized = memo(RelationInputDataManger);
+const Memoized = memo(RelationInputDataManager);
 
 export default connect(Memoized, select);

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

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

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

@@ -2,7 +2,7 @@ import { getRelationLink } from './getRelationLink';
 
 import { PUBLICATION_STATES } from '../constants';
 
-const normalizeRelation = (relation, { shouldAddLink, mainFieldName, targetModel }) => {
+export const normalizeRelation = (relation, { shouldAddLink, mainFieldName, targetModel }) => {
   const nextRelation = { ...relation };
 
   if (shouldAddLink) {
@@ -22,6 +22,14 @@ const normalizeRelation = (relation, { shouldAddLink, mainFieldName, targetModel
   return nextRelation;
 };
 
+/*
+ * Applies some transformations to existing and new relations in order to display them correctly
+ * relations: raw relations data coming from useRelations
+ * shouldAddLink: comes from generateRelationQueryInfos, if true we display a link to the relation (TO FIX: explanation)
+ * mainFieldName: name of the main field inside the relation (e.g. text field), if no displayable main field exists (e.g. date field) we use the id of the entry
+ * targetModel: the model on which the relation is based on, used to create an URL link
+ */
+
 export const normalizeRelations = (
   relations,
   { modifiedData = {}, shouldAddLink = false, mainFieldName, targetModel }
@@ -31,7 +39,7 @@ export const normalizeRelations = (
     data: {
       pages:
         [
-          ...(relations?.data?.pages ?? []),
+          ...(relations?.data?.pages.reverse() ?? []),
           ...(modifiedData?.connect ? [{ results: modifiedData.connect }] : []),
         ]
           ?.map((page) =>
@@ -44,7 +52,6 @@ export const normalizeRelations = (
               )
               .map((relation) =>
                 normalizeRelation(relation, {
-                  modifiedData,
                   shouldAddLink,
                   mainFieldName,
                   targetModel,

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

@@ -0,0 +1,12 @@
+import { normalizeRelation } from './normalizeRelations';
+
+export const normalizeSearchResults = (relations, { mainFieldName }) => {
+  return {
+    ...relations,
+    data: {
+      pages: [...(relations?.data?.pages ?? [])]?.map((page) =>
+        page?.results.map((relation) => normalizeRelation(relation, { mainFieldName }))
+      ),
+    },
+  };
+};

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

@@ -1,9 +1,16 @@
 import { useMemo } from 'react';
+import get from 'lodash/get';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
 import { getRequestUrl } from '../../../utils';
 
-function useSelect({ isUserAllowedToEditField, isUserAllowedToReadField, name, queryInfos }) {
+function useSelect({
+  componentUid,
+  isUserAllowedToEditField,
+  isUserAllowedToReadField,
+  name,
+  queryInfos,
+}) {
   const {
     isCreatingEntry,
     createActionAllowedFields,
@@ -11,7 +18,6 @@ function useSelect({ isUserAllowedToEditField, isUserAllowedToReadField, name, q
     updateActionAllowedFields,
     slug,
     initialData,
-    isSingleType,
   } = useCMEditViewDataManager();
 
   const isFieldAllowed = useMemo(() => {
@@ -40,25 +46,42 @@ function useSelect({ isUserAllowedToEditField, isUserAllowedToReadField, name, q
     return allowedFields.includes(name);
   }, [isCreatingEntry, isUserAllowedToReadField, name, readActionAllowedFields]);
 
-  // /content-manager/[collection-type]/[content-type]/[id]/[field-name]
-  const relationFetchEndpoint = useMemo(() => {
-    const collectionTypePrefix = isSingleType ? 'single-types' : 'collection-types';
+  const fieldNameKeys = name.split('.');
+  let componentId;
+
+  if (componentUid) {
+    componentId = get(initialData, fieldNameKeys.slice(0, -1))?.id;
+  }
 
+  // /content-manager/relations/[model]/[id]/[field-name]
+  const relationFetchEndpoint = useMemo(() => {
     if (isCreatingEntry) {
       return null;
     }
 
-    return getRequestUrl(
-      `${collectionTypePrefix}/${slug}/${initialData.id}/${name.split('.').at(-1)}`
-    );
-  }, [isCreatingEntry, slug, initialData, name, isSingleType]);
+    if (componentUid) {
+      // repeatable components and dz are dynamically created
+      // if no componentId exists in initialData 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;
+    }
 
-  // /content-manager/relations/[content-type]/[field-name]
+    return getRequestUrl(`relations/${slug}/${initialData.id}/${name.split('.').at(-1)}`);
+  }, [isCreatingEntry, componentUid, slug, initialData.id, name, componentId, fieldNameKeys]);
+
+  // /content-manager/relations/[model]/[field-name]
   const relationSearchEndpoint = useMemo(() => {
+    if (componentUid) {
+      return getRequestUrl(`relations/${componentUid}/${name.split('.').at(-1)}`);
+    }
+
     return getRequestUrl(`relations/${slug}/${name.split('.').at(-1)}`);
-  }, [slug, name]);
+  }, [componentUid, slug, name]);
 
   return {
+    componentId,
     queryInfos: {
       ...queryInfos,
       endpoints: {

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

@@ -44,6 +44,7 @@ const DragButton = styled.span`
 
 const DraggedItem = ({
   componentFieldName,
+  componentUid,
   // Errors are retrieved from the AccordionGroupCustom cloneElement
   hasErrorMessage,
   hasErrors,
@@ -265,11 +266,13 @@ const DraggedItem = ({
                       return (
                         <GridItem key={keys} col={size} s={12} xs={12}>
                           <Inputs
+                            componentUid={componentUid}
                             fieldSchema={fieldSchema}
                             keys={keys}
                             metadatas={metadatas}
                             // onBlur={hasErrors ? checkFormErrors : null}
                             queryInfos={queryInfos}
+                            size={size}
                           />
                         </GridItem>
                       );
@@ -286,6 +289,7 @@ const DraggedItem = ({
 };
 
 DraggedItem.defaultProps = {
+  componentUid: undefined,
   isDraggingSibling: false,
   isOpen: false,
   setIsDraggingSibling() {},
@@ -294,6 +298,7 @@ DraggedItem.defaultProps = {
 
 DraggedItem.propTypes = {
   componentFieldName: PropTypes.string.isRequired,
+  componentUid: PropTypes.string,
   hasErrorMessage: PropTypes.bool.isRequired,
   hasErrors: PropTypes.bool.isRequired,
   isDraggingSibling: PropTypes.bool,

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

@@ -234,6 +234,28 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       queryClient,
     ]
   );
+
+  const onDraftRelationCheck = useCallback(async () => {
+    try {
+      trackUsageRef.current('willCheckDraftRelations');
+
+      const endPoint = getRequestUrl(`${slug}/actions/numberOfDraftRelations`);
+      dispatch(setStatus('draft-relation-check-pending'));
+
+      const numberOfDraftRelations = await axiosInstance.get(endPoint);
+      trackUsageRef.current('didCheckDraftRelations');
+
+      dispatch(setStatus('resolved'));
+
+      return numberOfDraftRelations.data.data;
+    } catch (err) {
+      displayErrors(err);
+      dispatch(setStatus('resolved'));
+
+      return Promise.reject(err);
+    }
+  }, [displayErrors, slug, dispatch]);
+
   const onPublish = useCallback(async () => {
     try {
       trackUsageRef.current('willPublishEntry');
@@ -337,6 +359,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
     onDelete,
     onDeleteSucceeded,
     onPost,
+    onDraftRelationCheck,
     onPublish,
     onPut,
     onUnpublish,

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

@@ -22,18 +22,23 @@ export const useRelation = (cacheKey, { relation, search }) => {
   };
 
   const fetchSearch = async ({ pageParam = 1 }) => {
-    const { data } = await axiosInstance.get(search.endpoint, {
-      params: {
-        ...(search.pageParams ?? {}),
-        ...searchParams,
-        page: pageParam,
-      },
-    });
+    try {
+      const { data } = await axiosInstance.get(search.endpoint, {
+        params: {
+          ...(search.pageParams ?? {}),
+          ...searchParams,
+          page: pageParam,
+        },
+      });
 
-    return data;
+      return data;
+    } catch (err) {
+      return null;
+    }
   };
 
   const relationsRes = useInfiniteQuery(['relation', cacheKey], fetchRelations, {
+    cacheTime: 0,
     enabled: relation.enabled,
     getNextPageParam(lastPage) {
       // the API may send an empty 204 response
@@ -44,6 +49,9 @@ export const useRelation = (cacheKey, { relation, search }) => {
       // eslint-disable-next-line consistent-return
       return lastPage.pagination.page + 1;
     },
+    select: (data) => ({
+      pages: data.pages.map((page) => ({ ...page, results: [...(page.results ?? [])].reverse() })),
+    }),
   });
 
   const searchRes = useInfiniteQuery(
@@ -65,7 +73,7 @@ export const useRelation = (cacheKey, { relation, search }) => {
   const searchFor = (term, options = {}) => {
     setSearchParams({
       ...options,
-      _q: encodeURIComponent(term),
+      _q: term,
     });
   };