@strapi/admin 4.4.3 → 4.5.0-beta.0

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

@@ -11,7 +11,7 @@ import { getFieldName } from '../../utils';
 import Wysiwyg from '../Wysiwyg';
 import InputJSON from '../InputJSON';
 import InputUID from '../InputUID';
-import SelectWrapper from '../SelectWrapper';
+import { RelationInputDataManager } from '../RelationInputDataManager';
 
 import {
   connect,
@@ -24,6 +24,7 @@ import {
 
 function Inputs({
   allowedFields,
+  componentUid,
   fieldSchema,
   formErrors,
   isCreatingEntry,
@@ -35,6 +36,7 @@ function Inputs({
   shouldNotRunValidations,
   queryInfos,
   value,
+  size,
 }) {
   const { fields } = useLibrary();
   const { formatMessage } = useIntl();
@@ -224,9 +226,10 @@ function Inputs({
 
   if (type === 'relation') {
     return (
-      <SelectWrapper
+      <RelationInputDataManager
         {...metadatas}
         {...fieldSchema}
+        componentUid={componentUid}
         description={
           metadatas.description
             ? formatMessage({
@@ -252,6 +255,7 @@ function Inputs({
             : null
         }
         queryInfos={queryInfos}
+        size={size}
         value={value}
         error={error && formatMessage(error)}
       />
@@ -299,14 +303,17 @@ function Inputs({
 }
 
 Inputs.defaultProps = {
+  componentUid: undefined,
   formErrors: {},
   labelAction: undefined,
-  queryInfos: {},
+  size: undefined,
   value: null,
+  queryInfos: {},
 };
 
 Inputs.propTypes = {
   allowedFields: PropTypes.array.isRequired,
+  componentUid: PropTypes.string,
   fieldSchema: PropTypes.object.isRequired,
   formErrors: PropTypes.object,
   keys: PropTypes.string.isRequired,
@@ -315,13 +322,14 @@ Inputs.propTypes = {
   metadatas: PropTypes.object.isRequired,
   onChange: PropTypes.func.isRequired,
   readableFields: PropTypes.array.isRequired,
+  size: PropTypes.number,
   shouldNotRunValidations: PropTypes.bool.isRequired,
+  value: PropTypes.any,
   queryInfos: PropTypes.shape({
     containsKey: PropTypes.string,
     defaultParams: PropTypes.object,
     endPoint: PropTypes.string,
   }),
-  value: PropTypes.any,
 };
 
 const Memoized = memo(Inputs, isEqual);

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

@@ -61,10 +61,12 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
                 return (
                   <GridItem col={size} key={fieldName} s={12} xs={12}>
                     <Inputs
+                      componentUid={componentUid}
                       keys={keys}
                       fieldSchema={fieldSchema}
                       metadatas={metadatas}
                       queryInfos={queryInfos}
+                      size={size}
                     />
                   </GridItem>
                 );

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

@@ -0,0 +1,427 @@
+import React, { useRef, useState, useMemo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+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 { Box } from '@strapi/design-system/Box';
+import { Link } from '@strapi/design-system/Link';
+import { Icon } from '@strapi/design-system/Icon';
+import { FieldLabel, FieldError, FieldHint, Field } from '@strapi/design-system/Field';
+import { TextButton } from '@strapi/design-system/TextButton';
+import { Typography } from '@strapi/design-system/Typography';
+import { Tooltip } from '@strapi/design-system/Tooltip';
+
+import Cross from '@strapi/icons/Cross';
+import Refresh from '@strapi/icons/Refresh';
+
+import { Relation } from './components/Relation';
+import { RelationItem } from './components/RelationItem';
+import { RelationList } from './components/RelationList';
+import { Option } from './components/Option';
+import { RELATION_ITEM_HEIGHT } from './constants';
+
+const LinkEllipsis = styled(Link)`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inherit;
+`;
+
+const BoxEllipsis = styled(Box)`
+  > span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inherit;
+  }
+`;
+
+const DisconnectButton = styled.button`
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral500};
+  }
+
+  &:hover svg path,
+  &:focus svg path {
+    fill: ${({ theme }) => theme.colors.neutral600};
+  }
+`;
+
+const RelationInput = ({
+  description,
+  disabled,
+  error,
+  id,
+  name,
+  numberOfRelationsToDisplay,
+  label,
+  labelAction,
+  labelLoadMore,
+  labelDisconnectRelation,
+  loadingMessage,
+  onRelationAdd,
+  onRelationLoadMore,
+  onRelationRemove,
+  onSearchClose,
+  onSearchNextPage,
+  onSearchOpen,
+  onSearch,
+  placeholder,
+  publicationStateTranslations,
+  required,
+  relations: paginatedRelations,
+  searchResults,
+  size,
+}) => {
+  const [value, setValue] = useState(null);
+  const listRef = useRef();
+  const outerListRef = useRef();
+  const [overflow, setOverflow] = useState('');
+
+  const {
+    data: { pages },
+  } = searchResults;
+
+  const relations = useMemo(() => paginatedRelations.data.pages.flat(), [paginatedRelations]);
+  const totalNumberOfRelations = relations.length ?? 0;
+
+  const dynamicListHeight = useMemo(
+    () =>
+      totalNumberOfRelations > numberOfRelationsToDisplay
+        ? Math.min(totalNumberOfRelations, numberOfRelationsToDisplay) * RELATION_ITEM_HEIGHT +
+          RELATION_ITEM_HEIGHT / 2
+        : Math.min(totalNumberOfRelations, numberOfRelationsToDisplay) * RELATION_ITEM_HEIGHT,
+    [totalNumberOfRelations, numberOfRelationsToDisplay]
+  );
+
+  const shouldDisplayLoadMoreButton =
+    (!!labelLoadMore && !disabled && paginatedRelations.hasNextPage) ||
+    paginatedRelations.isLoading;
+
+  const options = useMemo(
+    () =>
+      pages.flat().map((result) => ({
+        ...result,
+        value: result.id,
+        label: result.mainField,
+      })),
+    [pages]
+  );
+
+  useEffect(() => {
+    if (totalNumberOfRelations <= numberOfRelationsToDisplay) {
+      return setOverflow('');
+    }
+
+    const handleNativeScroll = (e) => {
+      const parentScrollContainerHeight = e.target.parentNode.scrollHeight;
+      const maxScrollBottom = e.target.scrollHeight - e.target.scrollTop;
+
+      if (e.target.scrollTop === 0) {
+        return setOverflow('bottom');
+      }
+
+      if (maxScrollBottom === parentScrollContainerHeight) {
+        return setOverflow('top');
+      }
+
+      return setOverflow('top-bottom');
+    };
+
+    const outerListRefCurrent = outerListRef?.current;
+
+    if (!paginatedRelations.isLoading && relations.length > 0 && outerListRefCurrent) {
+      outerListRef.current.addEventListener('scroll', handleNativeScroll);
+    }
+
+    return () => {
+      if (outerListRefCurrent) {
+        outerListRefCurrent.removeEventListener('scroll', handleNativeScroll);
+      }
+    };
+  }, [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
+        totalNumberOfRelations={totalNumberOfRelations}
+        size={size}
+        search={
+          <>
+            <FieldLabel action={labelAction} required={required}>
+              {label}
+            </FieldLabel>
+            <ReactSelect
+              // 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}
+              isLoading={searchResults.isLoading}
+              error={error}
+              inputId={id}
+              isSearchable
+              isClear
+              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');
+                  });
+                }
+              }}
+              onInputChange={(value) => {
+                setValue(value);
+                onSearch(value);
+              }}
+              onMenuClose={handleMenuClose}
+              onMenuOpen={handleMenuOpen}
+              menuIsOpen={isMenuOpen}
+              onMenuScrollToBottom={() => {
+                if (searchResults.hasNextPage) {
+                  onSearchNextPage();
+                }
+              }}
+              placeholder={placeholder}
+              name={name}
+              value={value}
+            />
+          </>
+        }
+        loadMore={
+          shouldDisplayLoadMoreButton && (
+            <TextButton
+              disabled={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
+              onClick={() => onRelationLoadMore()}
+              loading={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
+              startIcon={<Refresh />}
+            >
+              {labelLoadMore}
+            </TextButton>
+          )
+        }
+      >
+        <RelationList overflow={overflow}>
+          <List
+            height={dynamicListHeight}
+            ref={listRef}
+            outerRef={outerListRef}
+            itemCount={totalNumberOfRelations}
+            itemSize={RELATION_ITEM_HEIGHT}
+            itemData={relations}
+            innerElementType="ol"
+          >
+            {({ data, index, style }) => {
+              const { publicationState, href, mainField, id } = data[index];
+              const badgeColor = publicationState === 'draft' ? 'secondary' : 'success';
+
+              return (
+                <RelationItem
+                  disabled={disabled}
+                  key={`relation-${name}-${id}`}
+                  endAction={
+                    <DisconnectButton
+                      data-testid={`remove-relation-${id}`}
+                      disabled={disabled}
+                      type="button"
+                      onClick={() => onRelationRemove(data[index])}
+                      aria-label={labelDisconnectRelation}
+                    >
+                      <Icon width="12px" as={Cross} />
+                    </DisconnectButton>
+                  }
+                  style={style}
+                >
+                  <BoxEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
+                    <Tooltip description={mainField ?? `${id}`}>
+                      {href ? (
+                        <LinkEllipsis to={href} disabled={disabled}>
+                          {mainField ?? id}
+                        </LinkEllipsis>
+                      ) : (
+                        <Typography textColor={disabled ? 'neutral600' : 'primary600'} ellipsis>
+                          {mainField ?? id}
+                        </Typography>
+                      )}
+                    </Tooltip>
+                  </BoxEllipsis>
+
+                  {publicationState && (
+                    <Badge
+                      borderSize={1}
+                      borderColor={`${badgeColor}200`}
+                      backgroundColor={`${badgeColor}100`}
+                      textColor={`${badgeColor}700`}
+                      shrink={0}
+                    >
+                      {publicationStateTranslations[publicationState]}
+                    </Badge>
+                  )}
+                </RelationItem>
+              );
+            }}
+          </List>
+        </RelationList>
+        {(description || error) && (
+          <Box paddingTop={2}>
+            <FieldHint />
+            <FieldError />
+          </Box>
+        )}
+      </Relation>
+    </Field>
+  );
+};
+
+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]),
+        })
+      )
+    ),
+  }),
+  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]),
+        })
+      )
+    ),
+  }),
+  hasNextPage: PropTypes.bool,
+  isLoading: PropTypes.bool.isRequired,
+  isSuccess: PropTypes.bool.isRequired,
+});
+
+RelationInput.defaultProps = {
+  description: undefined,
+  disabled: false,
+  error: undefined,
+  labelAction: null,
+  labelLoadMore: null,
+  onSearchClose: undefined,
+  required: false,
+  relations: [],
+  searchResults: [],
+};
+
+RelationInput.propTypes = {
+  error: PropTypes.string,
+  description: PropTypes.string,
+  disabled: PropTypes.bool,
+  id: PropTypes.string.isRequired,
+  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,
+  onRelationAdd: PropTypes.func.isRequired,
+  onRelationRemove: 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,
+  size: PropTypes.number.isRequired,
+  relations: ReactQueryRelationResult,
+};
+
+export default RelationInput;

package/admin/src/content-manager/components/{SelectWrapper → RelationInput/components}/Option.js

@@ -3,11 +3,12 @@ import styled from 'styled-components';
 import { components } from 'react-select';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { get, has, isEmpty } from 'lodash';
+
+import { pxToRem } from '@strapi/helper-plugin';
 import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
-import { pxToRem } from '@strapi/helper-plugin';
-import { getTrad } from '../../utils';
+
+import { getTrad } from '../../../utils';
 
 const StyledBullet = styled.div`
   flex-shrink: 0;
@@ -17,16 +18,15 @@ const StyledBullet = styled.div`
   background-color: ${({ theme, isDraft }) =>
     theme.colors[isDraft ? 'secondary600' : 'success600']};
   border-radius: 50%;
-  cursor: pointer;
 `;
 
-const Option = (props) => {
+export const Option = (props) => {
   const { formatMessage } = useIntl();
   const Component = components.Option;
-  const hasDraftAndPublish = has(get(props, 'data.value'), 'publishedAt');
+  const { publicationState, mainField, id } = props.data;
 
-  if (hasDraftAndPublish) {
-    const isDraft = isEmpty(get(props, 'data.value.publishedAt'));
+  if (publicationState) {
+    const isDraft = publicationState === 'draft';
     const draftMessage = {
       id: getTrad('components.Select.draft-info-title'),
       defaultMessage: 'State: Draft',
@@ -41,31 +41,21 @@ const Option = (props) => {
       <Component {...props}>
         <Flex>
           <StyledBullet title={title} isDraft={isDraft} />
-          <Typography ellipsis>{props.label ?? '-'}</Typography>
+          <Typography ellipsis>{mainField ?? id}</Typography>
         </Flex>
       </Component>
     );
   }
 
-  return <Component {...props}>{props.label ?? '-'}</Component>;
-};
-
-Option.defaultProps = {
-  label: '',
+  return <Component {...props}>{mainField ?? id}</Component>;
 };
 
 Option.propTypes = {
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   isFocused: PropTypes.bool.isRequired,
-  selectProps: PropTypes.shape({
-    hasDraftAndPublish: PropTypes.bool,
-    mainField: PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      schema: PropTypes.shape({
-        type: PropTypes.string.isRequired,
-      }).isRequired,
-    }).isRequired,
+  data: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    isDraft: PropTypes.bool,
+    mainField: PropTypes.string,
+    publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   }).isRequired,
 };
-
-export default Option;

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

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { Stack } from '@strapi/design-system/Stack';
+import { Flex } from '@strapi/design-system/Flex';
+
+export const Relation = ({
+  children,
+  loadMore,
+  search,
+  totalNumberOfRelations,
+  size,
+  ...props
+}) => {
+  return (
+    <>
+      <Flex
+        paddingBottom={totalNumberOfRelations > 0 ? 3 : 0}
+        gap={2}
+        justifyContent="space-between"
+        alignItems="end"
+        wrap="wrap"
+      >
+        <Stack basis={size <= 6 ? '100%' : '70%'} spacing={1} {...props}>
+          {search}
+        </Stack>
+
+        {loadMore}
+      </Flex>
+
+      {children}
+    </>
+  );
+};
+
+Relation.defaultProps = {
+  search: undefined,
+  loadMore: undefined,
+  totalNumberOfRelations: 0,
+};
+
+Relation.propTypes = {
+  children: PropTypes.node.isRequired,
+  search: PropTypes.node,
+  loadMore: PropTypes.node,
+  size: PropTypes.number.isRequired,
+  totalNumberOfRelations: PropTypes.number,
+};

package/admin/src/content-manager/components/RelationInput/components/RelationItem.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 { Flex } from '@strapi/design-system/Flex';
+
+const ChildrenWrapper = styled(Flex)`
+  width: 100%;
+  /* Used to prevent endAction to be pushed out of container */
+  min-width: 0;
+`;
+
+export const RelationItem = ({ children, disabled, endAction, style, ...props }) => {
+  return (
+    <Box style={style} as="li">
+      <Flex
+        paddingTop={2}
+        paddingBottom={2}
+        paddingLeft={4}
+        paddingRight={4}
+        hasRadius
+        borderSize={1}
+        background={disabled ? 'neutral150' : 'neutral0'}
+        borderColor="neutral200"
+        justifyContent="space-between"
+        {...props}
+      >
+        <ChildrenWrapper justifyContent="space-between">{children}</ChildrenWrapper>
+        {endAction && <Box paddingLeft={4}>{endAction}</Box>}
+      </Flex>
+    </Box>
+  );
+};
+
+RelationItem.defaultProps = {
+  disabled: false,
+  endAction: undefined,
+  style: undefined,
+};
+
+RelationItem.propTypes = {
+  children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool,
+  endAction: PropTypes.node,
+  style: PropTypes.shape({
+    height: PropTypes.number,
+    left: PropTypes.number,
+    position: PropTypes.string,
+    right: PropTypes.number,
+    width: PropTypes.string,
+  }),
+};