@strapi/admin 4.5.0-alpha.0 → 4.5.0

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

@@ -1,16 +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, 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 { PUBLICATION_STATES, RELATIONS_TO_DISPLAY, SEARCH_RESULTS_TO_DISPLAY } from './constants';
+
 import { getTrad } from '../../utils';
 
-export const RelationInputDataManger = ({
+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,
@@ -30,61 +39,42 @@ export const RelationInputDataManger = ({
   const { formatMessage } = useIntl();
   const { connectRelation, disconnectRelation, loadRelation, modifiedData, slug, initialData } =
     useCMEditViewDataManager();
-  const [{ query }] = useQueryParams();
+
+  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: initialData[name]?.count !== 0 && !!endpoints.relation,
+      enabled: !!endpoints.relation,
       endpoint: endpoints.relation,
+      pageGoal: currentLastPage,
       pageParams: {
         ...defaultParams,
-        locale: query?.plugins?.i18n?.locale,
         pageSize: RELATIONS_TO_DISPLAY,
       },
+      onLoad: loadRelation,
+      normalizeArguments: {
+        mainFieldName: mainField.name,
+        shouldAddLink: shouldDisplayRelationLink,
+        targetModel,
+      },
     },
 
     search: {
       endpoint: endpoints.search,
       pageParams: {
         ...defaultParams,
-        entityId: isCreatingEntry ? undefined : initialData.id,
-        locale: query?.plugins?.i18n?.locale,
+        // eslint-disable-next-line no-nested-ternary
+        entityId: isCreatingEntry ? undefined : isComponentRelation ? componentId : initialData.id,
         pageSize: SEARCH_RESULTS_TO_DISPLAY,
       },
     },
   });
 
-  const stringifiedRelations = JSON.stringify(relations);
-  const normalizedRelations = useMemo(
-    () =>
-      normalizeRelations(relations, {
-        modifiedData: modifiedData?.[name],
-        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,24 +94,37 @@ export const RelationInputDataManger = ({
     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, { idsToOmit: modifiedData?.[name]?.connect?.map((relation) => relation.id) });
-  };
+  const handleSearch = (term = '') => {
+    const [connected, disconnected] = diffRelations(
+      relationsFromModifiedData,
+      get(initialData, name)
+    );
 
-  const handleOpenSearch = () => {
-    searchFor('', { idsToOmit: modifiedData?.[name]?.connect?.map((relation) => relation.id) });
+    searchFor(term, {
+      idsToInclude: disconnected,
+      idsToOmit: connected,
+    });
   };
 
   const handleSearchMore = () => {
@@ -132,43 +135,70 @@ export const RelationInputDataManger = ({
     (!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={
-        // 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({
-          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()}
-      onSearchClose={() => {}}
-      onSearchOpen={handleOpenSearch}
       placeholder={formatMessage(
         placeholder || {
           id: getTrad('relation.add'),
@@ -186,9 +216,16 @@ export const RelationInputDataManger = ({
           defaultMessage: 'Published',
         }),
       }}
-      relations={normalizedRelations}
+      relations={pick(
+        { ...relations, data: relationsFromModifiedData },
+        'data',
+        'hasNextPage',
+        'isFetchingNextPage',
+        'isLoading',
+        'isSuccess'
+      )}
       required={required}
-      searchResults={normalizeRelations(search, {
+      searchResults={normalizeSearchResults(search, {
         mainFieldName: mainField.name,
       })}
       size={size}
@@ -196,17 +233,22 @@ export const RelationInputDataManger = ({
   );
 };
 
-RelationInputDataManger.defaultProps = {
+RelationInputDataManager.defaultProps = {
+  componentId: undefined,
   editable: true,
+  error: undefined,
   description: '',
   labelAction: null,
+  isComponentRelation: false,
   isFieldAllowed: true,
   placeholder: null,
   required: false,
 };
 
-RelationInputDataManger.propTypes = {
+RelationInputDataManager.propTypes = {
+  componentId: PropTypes.number,
   editable: PropTypes.bool,
+  error: PropTypes.string,
   description: PropTypes.string,
   intlLabel: PropTypes.shape({
     id: PropTypes.string.isRequired,
@@ -215,6 +257,7 @@ RelationInputDataManger.propTypes = {
   }).isRequired,
   labelAction: PropTypes.element,
   isCreatingEntry: PropTypes.bool.isRequired,
+  isComponentRelation: PropTypes.bool,
   isFieldAllowed: PropTypes.bool,
   isFieldReadable: PropTypes.bool.isRequired,
   mainField: PropTypes.shape({
@@ -235,7 +278,7 @@ RelationInputDataManger.propTypes = {
   targetModel: PropTypes.string.isRequired,
   queryInfos: PropTypes.shape({
     defaultParams: PropTypes.shape({
-      _component: PropTypes.string,
+      locale: PropTypes.string,
     }),
     endpoints: PropTypes.shape({
       relation: PropTypes.string,
@@ -245,6 +288,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/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,3 +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';

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,37 +22,23 @@ 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 }
+  { shouldAddLink = false, mainFieldName, targetModel } = {}
 ) => {
-  return {
-    ...relations,
-    data: {
-      pages:
-        [
-          ...(relations?.data?.pages ?? []),
-          ...(modifiedData?.connect ? [{ results: modifiedData.connect }] : []),
-        ]
-          ?.map((page) =>
-            page?.results
-              .filter(
-                (relation) =>
-                  !modifiedData?.disconnect?.find(
-                    (disconnectRelation) => disconnectRelation.id === relation.id
-                  )
-              )
-              .map((relation) =>
-                normalizeRelation(relation, {
-                  modifiedData,
-                  shouldAddLink,
-                  mainFieldName,
-                  targetModel,
-                })
-              )
-              .filter(Boolean)
-          )
-          ?.filter((page) => page.length > 0) ?? [],
-    },
-  };
+  return [...relations].map((relation) =>
+    normalizeRelation(relation, {
+      shouldAddLink,
+      mainFieldName,
+      targetModel,
+    })
+  );
 };

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

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

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,43 @@ 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,
+    isComponentRelation: Boolean(componentUid),
     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/RepeatableComponent/index.js

@@ -48,7 +48,7 @@ const RepeatableComponent = ({
   const [collapseToOpen, setCollapseToOpen] = useState('');
   const [isDraggingSibling, setIsDraggingSibling] = useState(false);
   const [, drop] = useDrop({ accept: ItemTypes.COMPONENT });
-  const { getComponentLayout } = useContentTypeLayout();
+  const { getComponentLayout, components } = useContentTypeLayout();
   const componentLayoutData = useMemo(
     () => getComponentLayout(componentUid),
     [componentUid, getComponentLayout]
@@ -73,7 +73,7 @@ const RepeatableComponent = ({
       if (componentValueLength < max) {
         const shouldCheckErrors = hasMinError;
 
-        addRepeatableComponentToField(name, componentUid, shouldCheckErrors);
+        addRepeatableComponentToField(name, componentLayoutData, components, shouldCheckErrors);
 
         setCollapseToOpen(nextTempKey);
       } else if (componentValueLength >= max) {
@@ -84,8 +84,9 @@ const RepeatableComponent = ({
       }
     }
   }, [
+    components,
     addRepeatableComponentToField,
-    componentUid,
+    componentLayoutData,
     componentValueLength,
     hasMinError,
     isReadOnly,

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/__test__/usePrev.test.js

@@ -0,0 +1,26 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { usePrev } from '../usePrev';
+
+describe('usePrev', () => {
+  const setup = () => renderHook(({ state }) => usePrev(state), { initialProps: { state: 0 } });
+
+  it('should return undefined on initial render', () => {
+    const { result } = setup();
+
+    expect(result.current).toBeUndefined();
+  });
+
+  it('should always return previous state after each update', () => {
+    const { result, rerender } = setup();
+
+    rerender({ state: 2 });
+    expect(result.current).toBe(0);
+
+    rerender({ state: 4 });
+    expect(result.current).toBe(2);
+
+    rerender({ state: 6 });
+    expect(result.current).toBe(4);
+  });
+});

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

@@ -5,3 +5,4 @@ export { default as useLayoutDnd } from './useLayoutDnd';
 export { default as usePluginsQueryParams } from './usePluginsQueryParams';
 export { default as useSyncRbac } from './useSyncRbac';
 export { default as useWysiwyg } from './useWysiwyg';
+export { usePrev } from './usePrev';