@strapi/admin 4.4.3 → 4.5.0-beta.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 = 50;

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,261 @@
+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 } 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';
+
+export const RelationInputDataManager = ({
+  componentId,
+  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 { relations, search, searchFor } = useRelation(`${slug}-${name}-${initialData?.id ?? ''}`, {
+    relation: {
+      enabled: get(initialData, name)?.count !== 0 && !!endpoints.relation,
+      endpoint: endpoints.relation,
+      pageParams: {
+        ...defaultParams,
+        pageSize: RELATIONS_TO_DISPLAY,
+      },
+    },
+
+    search: {
+      endpoint: endpoints.search,
+      pageParams: {
+        ...defaultParams,
+        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: 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 = [
+    '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, {
+      idsToInclude: relationsFromModifiedData?.disconnect?.map((relation) => relation.id),
+      idsToOmit: relationsFromModifiedData?.connect?.map((relation) => relation.id),
+    });
+  };
+
+  const handleOpenSearch = () => {
+    searchFor('', {
+      idsToInclude: relationsFromModifiedData?.disconnect?.map((relation) => relation.id),
+      idsToOmit: relationsFromModifiedData?.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={
+        !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',
+        })
+      }
+      name={name}
+      numberOfRelationsToDisplay={RELATIONS_TO_DISPLAY}
+      onRelationAdd={(relation) => handleRelationAdd(relation)}
+      onRelationRemove={(relation) => handleRelationRemove(relation)}
+      onRelationLoadMore={() => handleRelationLoadMore()}
+      onSearch={(term) => handleSearch(term)}
+      onSearchNextPage={() => handleSearchMore()}
+      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={normalizeSearchResults(search, {
+        mainFieldName: mainField.name,
+      })}
+      size={size}
+    />
+  );
+};
+
+RelationInputDataManager.defaultProps = {
+  componentId: undefined,
+  editable: true,
+  description: '',
+  labelAction: null,
+  isFieldAllowed: true,
+  placeholder: null,
+  required: false,
+};
+
+RelationInputDataManager.propTypes = {
+  componentId: PropTypes.number,
+  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(RelationInputDataManager);
+
+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/RelationInputDataManager/utils/index.js

@@ -0,0 +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

@@ -0,0 +1,65 @@
+import { getRelationLink } from './getRelationLink';
+
+import { PUBLICATION_STATES } from '../constants';
+
+export 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;
+};
+
+/*
+ * 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 }
+) => {
+  return {
+    ...relations,
+    data: {
+      pages:
+        [
+          ...(relations?.data?.pages.reverse() ?? []),
+          ...(modifiedData?.connect ? [{ results: modifiedData.connect }] : []),
+        ]
+          ?.map((page) =>
+            page?.results
+              .filter(
+                (relation) =>
+                  !modifiedData?.disconnect?.find(
+                    (disconnectRelation) => disconnectRelation.id === relation.id
+                  )
+              )
+              .map((relation) =>
+                normalizeRelation(relation, {
+                  shouldAddLink,
+                  mainFieldName,
+                  targetModel,
+                })
+              )
+              .filter(Boolean)
+          )
+          ?.filter((page) => page.length > 0) ?? [],
+    },
+  };
+};

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

@@ -0,0 +1,98 @@
+import { useMemo } from 'react';
+import get from 'lodash/get';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+
+import { getRequestUrl } from '../../../utils';
+
+function useSelect({
+  componentUid,
+  isUserAllowedToEditField,
+  isUserAllowedToReadField,
+  name,
+  queryInfos,
+}) {
+  const {
+    isCreatingEntry,
+    createActionAllowedFields,
+    readActionAllowedFields,
+    updateActionAllowedFields,
+    slug,
+    initialData,
+  } = useCMEditViewDataManager();
+
+  const isFieldAllowed = useMemo(() => {
+    if (isUserAllowedToEditField === true) {
+      return true;
+    }
+
+    const allowedFields = isCreatingEntry ? createActionAllowedFields : updateActionAllowedFields;
+
+    return allowedFields.includes(name);
+  }, [
+    isCreatingEntry,
+    createActionAllowedFields,
+    name,
+    isUserAllowedToEditField,
+    updateActionAllowedFields,
+  ]);
+
+  const isFieldReadable = useMemo(() => {
+    if (isUserAllowedToReadField) {
+      return true;
+    }
+
+    const allowedFields = isCreatingEntry ? [] : readActionAllowedFields;
+
+    return allowedFields.includes(name);
+  }, [isCreatingEntry, isUserAllowedToReadField, name, readActionAllowedFields]);
+
+  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;
+    }
+
+    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;
+    }
+
+    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)}`);
+  }, [componentUid, slug, name]);
+
+  return {
+    componentId,
+    queryInfos: {
+      ...queryInfos,
+      endpoints: {
+        search: relationSearchEndpoint,
+        relation: relationFetchEndpoint,
+      },
+    },
+    isCreatingEntry,
+    isFieldAllowed,
+    isFieldReadable,
+  };
+}
+
+export default useSelect;

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

@@ -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,8 +223,39 @@ 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 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');
@@ -267,6 +303,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 +321,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
@@ -320,6 +359,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
     onDelete,
     onDeleteSucceeded,
     onPost,
+    onDraftRelationCheck,
     onPublish,
     onPut,
     onUnpublish,