@strapi/admin 4.4.0-rc.1 → 4.5.0-alpha.0

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Box } from '@strapi/design-system/Box';
+import { Stack } from '@strapi/design-system/Stack';
+
+const ShadowBox = styled(Box)`
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  &:before,
+  &:after {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    z-index: 1;
+  }
+
+  &:before {
+    /* TODO: as for DS Table component we would need this to be handled by the DS theme */
+    content: ${({ overflowDirection }) =>
+      overflowDirection === 'top-bottom' || overflowDirection === 'top' ? "''" : undefined};
+    background: linear-gradient(rgba(33, 33, 52, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
+    top: 0;
+  }
+
+  &:after {
+    /* TODO: as for DS Table component we would need this to be handled by the DS theme */
+    content: ${({ overflowDirection }) =>
+      overflowDirection === 'top-bottom' || overflowDirection === 'bottom' ? "''" : undefined};
+    background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(33, 33, 52, 0.1) 100%);
+    bottom: 0;
+  }
+`;
+
+export const RelationList = ({ children, overflow, ...props }) => {
+  return (
+    <ShadowBox overflowDirection={overflow} {...props}>
+      <Stack spacing={1}>{children}</Stack>
+    </ShadowBox>
+  );
+};
+
+RelationList.defaultProps = {
+  overflow: '',
+};
+
+RelationList.propTypes = {
+  children: PropTypes.node.isRequired,
+  overflow: PropTypes.oneOf(['top-bottom', 'bottom', 'top', '']),
+};

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

@@ -0,0 +1 @@
+export const RELATION_ITEM_HEIGHT = 58;

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

@@ -0,0 +1 @@
+export { default as RelationInput } from './RelationInput';

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

@@ -0,0 +1,250 @@
+import PropTypes from 'prop-types';
+import React, { memo, useEffect, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+
+import { useCMEditViewDataManager, NotAllowedInput, useQueryParams } 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 = ({
+  editable,
+  description,
+  intlLabel,
+  isCreatingEntry,
+  isFieldAllowed,
+  isFieldReadable,
+  labelAction,
+  mainField,
+  name,
+  queryInfos: { endpoints, defaultParams, shouldDisplayRelationLink },
+  placeholder,
+  required,
+  relationType,
+  size,
+  targetModel,
+}) => {
+  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,
+      endpoint: endpoints.relation,
+      pageParams: {
+        ...defaultParams,
+        locale: query?.plugins?.i18n?.locale,
+        pageSize: RELATIONS_TO_DISPLAY,
+      },
+    },
+
+    search: {
+      endpoint: endpoints.search,
+      pageParams: {
+        ...defaultParams,
+        entityId: isCreatingEntry ? undefined : initialData.id,
+        locale: query?.plugins?.i18n?.locale,
+        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 = [
+    'oneWay',
+    'oneToOne',
+    'manyToOne',
+    'oneToManyMorph',
+    'oneToOneMorph',
+  ].includes(relationType);
+
+  const isDisabled = useMemo(() => {
+    if (isMorph) {
+      return true;
+    }
+
+    if (!isCreatingEntry) {
+      return (!isFieldAllowed && isFieldReadable) || !editable;
+    }
+
+    return !editable;
+  }, [isMorph, isCreatingEntry, editable, isFieldAllowed, isFieldReadable]);
+
+  const handleRelationAdd = (relation) => {
+    connectRelation({ target: { name, value: relation, replace: isSingleRelation } });
+  };
+
+  const handleRelationRemove = (relation) => {
+    disconnectRelation({ target: { name, value: relation } });
+  };
+
+  const handleRelationLoadMore = () => {
+    relations.fetchNextPage();
+  };
+
+  const handleSearch = (term) => {
+    searchFor(term, { idsToOmit: modifiedData?.[name]?.connect?.map((relation) => relation.id) });
+  };
+
+  const handleOpenSearch = () => {
+    searchFor('', { idsToOmit: modifiedData?.[name]?.connect?.map((relation) => relation.id) });
+  };
+
+  const handleSearchMore = () => {
+    search.fetchNextPage();
+  };
+
+  if (
+    (!isFieldAllowed && isCreatingEntry) ||
+    (!isCreatingEntry && !isFieldAllowed && !isFieldReadable)
+  ) {
+    return <NotAllowedInput intlLabel={intlLabel} labelAction={labelAction} />;
+  }
+
+  return (
+    <RelationInput
+      description={description}
+      disabled={isDisabled}
+      id={name}
+      label={`${formatMessage({
+        id: intlLabel.id,
+        defaultMessage: intlLabel.defaultMessage,
+      })} ${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',
+        })
+      }
+      listHeight={320}
+      loadingMessage={() =>
+        formatMessage({
+          id: getTrad('relation.isLoading'),
+          defaultMessage: 'Relations are loading',
+        })
+      }
+      name={name}
+      numberOfRelationsToDisplay={RELATIONS_TO_DISPLAY}
+      onRelationAdd={(relation) => handleRelationAdd(relation)}
+      onRelationRemove={(relation) => handleRelationRemove(relation)}
+      onRelationLoadMore={() => handleRelationLoadMore()}
+      onSearch={(term) => handleSearch(term)}
+      onSearchNextPage={() => handleSearchMore()}
+      onSearchClose={() => {}}
+      onSearchOpen={handleOpenSearch}
+      placeholder={formatMessage(
+        placeholder || {
+          id: getTrad('relation.add'),
+          defaultMessage: 'Add relation',
+        }
+      )}
+      publicationStateTranslations={{
+        [PUBLICATION_STATES.DRAFT]: formatMessage({
+          id: getTrad('relation.publicationState.draft'),
+          defaultMessage: 'Draft',
+        }),
+
+        [PUBLICATION_STATES.PUBLISHED]: formatMessage({
+          id: getTrad('relation.publicationState.published'),
+          defaultMessage: 'Published',
+        }),
+      }}
+      relations={normalizedRelations}
+      required={required}
+      searchResults={normalizeRelations(search, {
+        mainFieldName: mainField.name,
+      })}
+      size={size}
+    />
+  );
+};
+
+RelationInputDataManger.defaultProps = {
+  editable: true,
+  description: '',
+  labelAction: null,
+  isFieldAllowed: true,
+  placeholder: null,
+  required: false,
+};
+
+RelationInputDataManger.propTypes = {
+  editable: PropTypes.bool,
+  description: PropTypes.string,
+  intlLabel: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }).isRequired,
+  labelAction: PropTypes.element,
+  isCreatingEntry: PropTypes.bool.isRequired,
+  isFieldAllowed: PropTypes.bool,
+  isFieldReadable: PropTypes.bool.isRequired,
+  mainField: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    schema: PropTypes.shape({
+      type: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  name: PropTypes.string.isRequired,
+  placeholder: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
+  }),
+  required: PropTypes.bool,
+  relationType: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  targetModel: PropTypes.string.isRequired,
+  queryInfos: PropTypes.shape({
+    defaultParams: PropTypes.shape({
+      _component: PropTypes.string,
+    }),
+    endpoints: PropTypes.shape({
+      relation: PropTypes.string,
+      search: PropTypes.string.isRequired,
+    }).isRequired,
+    shouldDisplayRelationLink: PropTypes.bool.isRequired,
+  }).isRequired,
+};
+
+const Memoized = memo(RelationInputDataManger);
+
+export default connect(Memoized, select);

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

@@ -0,0 +1,8 @@
+export const PUBLICATION_STATES = {
+  DRAFT: 'draft',
+  PUBLISHED: 'published',
+};
+
+export const RELATIONS_TO_DISPLAY = 5;
+
+export const SEARCH_RESULTS_TO_DISPLAY = 10;

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

@@ -0,0 +1 @@
+export { default as RelationInputDataManager } from './RelationInputDataManager';

package/admin/src/content-manager/components/{SelectWrapper → RelationInputDataManager}/utils/connect.js

@@ -2,7 +2,6 @@ import React from 'react';
 
 function connect(WrappedComponent, select) {
   return (props) => {
-    // eslint-disable-next-line react/prop-types
     const selectors = select(props);
 
     return <WrappedComponent {...props} {...selectors} />;

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

@@ -0,0 +1,5 @@
+import { getRequestUrl } from '../../../utils';
+
+export function getRelationLink(targetModel, id) {
+  return `${getRequestUrl(`collectionType/${targetModel}/${id ?? ''}`)}`;
+}

package/admin/src/content-manager/components/{SelectWrapper → RelationInputDataManager}/utils/index.js

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

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

@@ -0,0 +1,58 @@
+import { getRelationLink } from './getRelationLink';
+
+import { PUBLICATION_STATES } from '../constants';
+
+const normalizeRelation = (relation, { shouldAddLink, mainFieldName, targetModel }) => {
+  const nextRelation = { ...relation };
+
+  if (shouldAddLink) {
+    nextRelation.href = getRelationLink(targetModel, nextRelation.id);
+  }
+
+  nextRelation.publicationState = false;
+
+  if (nextRelation?.publishedAt !== undefined) {
+    nextRelation.publicationState = nextRelation.publishedAt
+      ? PUBLICATION_STATES.PUBLISHED
+      : PUBLICATION_STATES.DRAFT;
+  }
+
+  nextRelation.mainField = nextRelation[mainFieldName];
+
+  return nextRelation;
+};
+
+export const normalizeRelations = (
+  relations,
+  { modifiedData = {}, 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) ?? [],
+    },
+  };
+};

package/admin/src/content-manager/components/{SelectWrapper → RelationInputDataManager}/utils/select.js

@@ -1,12 +1,17 @@
 import { useMemo } from 'react';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
-function useSelect({ isUserAllowedToEditField, isUserAllowedToReadField, name }) {
+import { getRequestUrl } from '../../../utils';
+
+function useSelect({ isUserAllowedToEditField, isUserAllowedToReadField, name, queryInfos }) {
   const {
     isCreatingEntry,
     createActionAllowedFields,
     readActionAllowedFields,
     updateActionAllowedFields,
+    slug,
+    initialData,
+    isSingleType,
   } = useCMEditViewDataManager();
 
   const isFieldAllowed = useMemo(() => {
@@ -35,7 +40,32 @@ function useSelect({ isUserAllowedToEditField, isUserAllowedToReadField, name })
     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';
+
+    if (isCreatingEntry) {
+      return null;
+    }
+
+    return getRequestUrl(
+      `${collectionTypePrefix}/${slug}/${initialData.id}/${name.split('.').at(-1)}`
+    );
+  }, [isCreatingEntry, slug, initialData, name, isSingleType]);
+
+  // /content-manager/relations/[content-type]/[field-name]
+  const relationSearchEndpoint = useMemo(() => {
+    return getRequestUrl(`relations/${slug}/${name.split('.').at(-1)}`);
+  }, [slug, name]);
+
   return {
+    queryInfos: {
+      ...queryInfos,
+      endpoints: {
+        search: relationSearchEndpoint,
+        relation: relationFetchEndpoint,
+      },
+    },
     isCreatingEntry,
     isFieldAllowed,
     isFieldReadable,

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

@@ -1,5 +1,6 @@
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
+import { useQueryClient } from 'react-query';
 import get from 'lodash/get';
 import {
   useTracking,
@@ -28,6 +29,7 @@ import buildQueryString from '../../pages/ListView/utils/buildQueryString';
 
 // This container is used to handle the CRUD
 const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
+  const queryClient = useQueryClient();
   const { trackUsage } = useTracking();
   const { push } = useHistory();
   const { setCurrentStep } = useGuidedTour();
@@ -202,6 +204,9 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
         setCurrentStep('contentManager.success');
 
+        // TODO: need to find a better place, or a better abstraction
+        queryClient.invalidateQueries(['relation']);
+
         dispatch(submitSucceeded(cleanReceivedData(data)));
         setIsCreatingEntry(false);
 
@@ -218,7 +223,16 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         return Promise.reject(err);
       }
     },
-    [cleanReceivedData, displayErrors, slug, dispatch, rawQuery, toggleNotification, setCurrentStep]
+    [
+      cleanReceivedData,
+      displayErrors,
+      slug,
+      dispatch,
+      rawQuery,
+      toggleNotification,
+      setCurrentStep,
+      queryClient,
+    ]
   );
   const onPublish = useCallback(async () => {
     try {
@@ -267,6 +281,9 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
         trackUsageRef.current('didEditEntry', { trackerProperty });
 
+        // TODO: need to find a better place, or a better abstraction
+        queryClient.invalidateQueries(['relation']);
+
         dispatch(submitSucceeded(cleanReceivedData(data)));
 
         dispatch(setStatus('resolved'));
@@ -282,7 +299,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         return Promise.reject(err);
       }
     },
-    [cleanReceivedData, displayErrors, slug, dispatch, rawQuery, toggleNotification]
+    [cleanReceivedData, displayErrors, slug, dispatch, rawQuery, toggleNotification, queryClient]
   );
 
   // The publish and unpublish method could be refactored but let's leave the duplication for now

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/utils/formatLayouts.js

@@ -1,49 +1,16 @@
 import { cloneDeep, get, set } from 'lodash';
-import { getRequestUrl, mergeMetasWithSchema } from '../../../utils';
+import { mergeMetasWithSchema } from '../../../utils';
 
 const getRelationModel = (targetModel, models) => models.find((model) => model.uid === targetModel);
 
-// editRelations is an array of strings...
-const formatEditRelationsLayoutWithMetas = (contentTypeConfiguration, models) => {
-  const formatted = contentTypeConfiguration.layouts.editRelations.reduce((acc, current) => {
-    const fieldSchema = get(contentTypeConfiguration, ['attributes', current], {});
-    const targetModelUID = get(
-      contentTypeConfiguration,
-      ['attributes', current, 'targetModel'],
-      null
-    );
-    const targetModelSchema = getRelationModel(targetModelUID, models);
-    const targetModelPluginOptions = targetModelSchema.pluginOptions || {};
-    const metadatas = get(contentTypeConfiguration, ['metadatas', current, 'edit'], {});
-    const size = 6;
-
-    const queryInfos = generateRelationQueryInfos(contentTypeConfiguration, current, models);
-
-    acc.push({
-      name: current,
-      size,
-      fieldSchema,
-      metadatas,
-      queryInfos,
-      targetModelPluginOptions,
-    });
-
-    return acc;
-  }, []);
-
-  return formatted;
-};
-
 const formatLayouts = (initialData, models) => {
   const data = createMetasSchema(initialData, models);
 
   const formattedCTEditLayout = formatLayoutWithMetas(data.contentType, null, models);
   const ctUid = data.contentType.uid;
-  const formattedEditRelationsLayout = formatEditRelationsLayoutWithMetas(data.contentType, models);
   const formattedListLayout = formatListLayoutWithMetas(data.contentType, data.components);
 
   set(data, ['contentType', 'layouts', 'edit'], formattedCTEditLayout);
-  set(data, ['contentType', 'layouts', 'editRelations'], formattedEditRelationsLayout);
   set(data, ['contentType', 'layouts', 'list'], formattedListLayout);
 
   Object.keys(data.components).forEach((compoUID) => {
@@ -126,7 +93,6 @@ const formatLayoutWithMetas = (contentTypeConfiguration, ctUid, models) => {
           ? generateRelationQueryInfosForComponents(
               contentTypeConfiguration,
               attribute.name,
-              ctUid,
               models
             )
           : generateRelationQueryInfos(contentTypeConfiguration, attribute.name, models);
@@ -155,7 +121,6 @@ const formatListLayoutWithMetas = (contentTypeConfiguration, components) => {
 
     if (type === 'relation') {
       const queryInfos = {
-        endPoint: `collection-types/${contentTypeConfiguration.uid}`,
         defaultParams: {},
       };
 
@@ -194,51 +159,25 @@ const formatListLayoutWithMetas = (contentTypeConfiguration, components) => {
 };
 
 const generateRelationQueryInfos = (contentTypeConfiguration, fieldName, models) => {
-  const uid = contentTypeConfiguration.uid;
-  const endPoint = getRequestUrl(`relations/${uid}/${fieldName}`);
-  const mainField = get(
-    contentTypeConfiguration,
-    ['metadatas', fieldName, 'edit', 'mainField', 'name'],
-    ''
-  );
   const targetModel = get(contentTypeConfiguration, ['attributes', fieldName, 'targetModel'], '');
-  const shouldDisplayRelationLink = getDisplayedModels(models).indexOf(targetModel) !== -1;
+  const shouldDisplayRelationLink = getDisplayedModels(models).includes(targetModel);
 
-  const queryInfos = {
-    endPoint,
-    containsKey: `${mainField}`,
+  return {
     defaultParams: {},
     shouldDisplayRelationLink,
   };
-
-  return queryInfos;
 };
 
-const generateRelationQueryInfosForComponents = (
-  contentTypeConfiguration,
-  fieldName,
-  ctUid,
-  models
-) => {
-  const endPoint = getRequestUrl(`relations/${ctUid}/${fieldName}`);
-  const mainField = get(
-    contentTypeConfiguration,
-    ['metadatas', fieldName, 'edit', 'mainField', 'name'],
-    ''
-  );
+const generateRelationQueryInfosForComponents = (contentTypeConfiguration, fieldName, models) => {
   const targetModel = get(contentTypeConfiguration, ['attributes', fieldName, 'targetModel'], '');
-  const shouldDisplayRelationLink = getDisplayedModels(models).indexOf(targetModel) !== -1;
+  const shouldDisplayRelationLink = getDisplayedModels(models).includes(targetModel);
 
-  const queryInfos = {
-    endPoint,
-    containsKey: `${mainField}`,
+  return {
     defaultParams: {
-      _component: contentTypeConfiguration.uid,
+      component: contentTypeConfiguration.uid,
     },
     shouldDisplayRelationLink,
   };
-
-  return queryInfos;
 };
 
 const getDisplayedModels = (models) =>
@@ -246,7 +185,6 @@ const getDisplayedModels = (models) =>
 
 export default formatLayouts;
 export {
-  formatEditRelationsLayoutWithMetas,
   formatLayoutWithMetas,
   formatListLayoutWithMetas,
   generateRelationQueryInfos,

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

@@ -0,0 +1 @@
+export { useRelation } from './useRelation';