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

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

@@ -5,13 +5,15 @@ import get from 'lodash/get';
 import omit from 'lodash/omit';
 import take from 'lodash/take';
 import isEqual from 'react-fast-compare';
-import { GenericInput, NotAllowedInput, useLibrary, useCustomFields } from '@strapi/helper-plugin';
-import { useContentTypeLayout } from '../../hooks';
-import { getFieldName } from '../../utils';
+import { GenericInput, NotAllowedInput, useLibrary } from '@strapi/helper-plugin';
+
 import Wysiwyg from '../Wysiwyg';
 import InputJSON from '../InputJSON';
 import InputUID from '../InputUID';
-import SelectWrapper from '../SelectWrapper';
+import { RelationInputDataManager } from '../RelationInputDataManager';
+
+import { useContentTypeLayout } from '../../hooks';
+import { getFieldName } from '../../utils';
 
 import {
   connect,
@@ -35,14 +37,14 @@ function Inputs({
   shouldNotRunValidations,
   queryInfos,
   value,
+  size,
 }) {
   const { fields } = useLibrary();
   const { formatMessage } = useIntl();
   const { contentType: currentContentTypeLayout } = useContentTypeLayout();
-  const customFieldsRegistry = useCustomFields();
 
   const disabled = useMemo(() => !get(metadatas, 'editable', true), [metadatas]);
-  const { type, customField: customFieldUid } = fieldSchema;
+  const type = fieldSchema.type;
   const error = get(formErrors, [keys], null);
 
   const fieldName = useMemo(() => {
@@ -192,19 +194,6 @@ function Inputs({
     return minutes % metadatas.step === 0 ? metadatas.step : step;
   }, [inputType, inputValue, metadatas.step, step]);
 
-  // Memoize the component to avoid remounting it and losing state
-  const CustomFieldInput = useMemo(() => {
-    if (customFieldUid) {
-      const customField = customFieldsRegistry.get(customFieldUid);
-      const CustomFieldInput = React.lazy(customField.components.Input);
-
-      return CustomFieldInput;
-    }
-
-    // Not a custom field, component won't be used
-    return null;
-  }, [customFieldUid, customFieldsRegistry]);
-
   if (visible === false) {
     return null;
   }
@@ -224,7 +213,7 @@ function Inputs({
 
   if (type === 'relation') {
     return (
-      <SelectWrapper
+      <RelationInputDataManager
         {...metadatas}
         {...fieldSchema}
         description={
@@ -252,24 +241,13 @@ function Inputs({
             : null
         }
         queryInfos={queryInfos}
+        size={size}
         value={value}
         error={error && formatMessage(error)}
       />
     );
   }
 
-  const customInputs = {
-    json: InputJSON,
-    uid: InputUID,
-    media: fields.media,
-    wysiwyg: Wysiwyg,
-    ...fields,
-  };
-
-  if (customFieldUid) {
-    customInputs[customFieldUid] = CustomFieldInput;
-  }
-
   return (
     <GenericInput
       attribute={fieldSchema}
@@ -282,7 +260,13 @@ function Inputs({
       error={error}
       labelAction={labelAction}
       contentTypeUID={currentContentTypeLayout.uid}
-      customInputs={customInputs}
+      customInputs={{
+        json: InputJSON,
+        uid: InputUID,
+        media: fields.media,
+        wysiwyg: Wysiwyg,
+        ...fields,
+      }}
       multiple={fieldSchema.multiple || false}
       name={keys}
       onChange={onChange}
@@ -290,7 +274,7 @@ function Inputs({
       placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
       required={fieldSchema.required || false}
       step={inputStep}
-      type={customFieldUid || inputType}
+      type={inputType}
       // validations={validations}
       value={inputValue}
       withDefaultValue={false}
@@ -301,8 +285,9 @@ function Inputs({
 Inputs.defaultProps = {
   formErrors: {},
   labelAction: undefined,
-  queryInfos: {},
+  size: undefined,
   value: null,
+  queryInfos: {},
 };
 
 Inputs.propTypes = {
@@ -315,13 +300,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/RelationInput/RelationInput.js

@@ -0,0 +1,364 @@
+import React, { useRef, useState, useMemo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import styled, { keyframes } 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 Loader from '@strapi/icons/Loader';
+
+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 rotation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  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;
+`;
+
+const RelationInput = ({
+  description,
+  disabled,
+  error,
+  id,
+  name,
+  numberOfRelationsToDisplay,
+  label,
+  labelAction,
+  labelLoadMore,
+  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 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(
+    () =>
+      searchResults.data.pages.flat().map((result) => ({
+        ...result,
+        value: result.id,
+        label: result.mainField,
+      })),
+    [searchResults]
+  );
+
+  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]);
+
+  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"
+              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={onSearchClose}
+              onMenuOpen={onSearchOpen}
+              onMenuScrollToBottom={() => {
+                if (searchResults.hasNextPage) {
+                  onSearchNextPage();
+                }
+              }}
+              placeholder={placeholder}
+              name={name}
+              value={value}
+            />
+          </>
+        }
+        loadMore={
+          shouldDisplayLoadMoreButton && (
+            <TextButton
+              disabled={paginatedRelations.isLoading}
+              onClick={() => onRelationLoadMore()}
+              startIcon={
+                paginatedRelations.isLoading ? (
+                  // TODO: To replace with loading prop on TextButton after DS release
+                  <LoaderWrapper>
+                    <Loader />
+                  </LoaderWrapper>
+                ) : (
+                  <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={
+                    <button
+                      data-testid={`remove-relation-${id}`}
+                      disabled={disabled}
+                      type="button"
+                      onClick={() => onRelationRemove(data[index])}
+                    >
+                      <Icon width="12px" as={Cross} />
+                    </button>
+                  }
+                  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,
+  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,
+  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,
+  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.isRequired,
+  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={3}
+        paddingBottom={3}
+        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,
+  }),
+};