@strapi/admin 4.11.3 → 4.11.5

package/admin/src/components/AuthenticatedApp/index.js

@@ -38,7 +38,7 @@ const AuthenticatedApp = () => {
   const [
     { data: appInfos, status },
     { data: tagName, isLoading },
-    { data: permissions, status: fetchPermissionsStatus, refetch, isFetched, isFetching },
+    { data: permissions, status: fetchPermissionsStatus, refetch, isFetching },
     { data: userRoles },
   ] = useQueries([
     { queryKey: 'app-infos', queryFn: fetchAppInfo },
@@ -86,7 +86,7 @@ const AuthenticatedApp = () => {
   // We don't need to wait for the release query to be fetched before rendering the plugins
   // however, we need the appInfos and the permissions
   const shouldShowNotDependentQueriesLoader =
-    (isFetching && isFetched) || status === 'loading' || fetchPermissionsStatus === 'loading';
+    isFetching || status === 'loading' || fetchPermissionsStatus === 'loading';
 
   const shouldShowLoader = isLoading || shouldShowNotDependentQueriesLoader;
 

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

@@ -43,7 +43,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   const { setCurrentStep } = useGuidedTour();
   const { trackUsage } = useTracking();
   const { push, replace } = useHistory();
-  const [{ rawQuery }] = useQueryParams();
+  const [{ query, rawQuery }] = useQueryParams();
   const dispatch = useDispatch();
   const { componentsDataStructure, contentTypeDataStructure, data, isLoading, status } =
     useSelector(selectCrudReducer);
@@ -244,13 +244,15 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
        */
       const endPoint =
         typeof origin === 'string'
-          ? `${getRequestUrl(`collection-types/${slug}/clone/${origin}`)}${rawQuery}`
-          : `${getRequestUrl(`collection-types/${slug}`)}${rawQuery}`;
+          ? getRequestUrl(`collection-types/${slug}/clone/${origin}`)
+          : getRequestUrl(`collection-types/${slug}`);
       try {
         // Show a loading button in the EditView/Header.js && lock the app => no navigation
         dispatch(setStatus('submit-pending'));
 
-        const { data } = await post(endPoint, body);
+        const { data } = await post(endPoint, body, {
+          params: query,
+        });
 
         trackUsageRef.current('didCreateEntry', trackerProperty);
         toggleNotification({
@@ -286,11 +288,12 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       replace,
       slug,
       dispatch,
-      rawQuery,
+      query,
       toggleNotification,
       setCurrentStep,
       queryClient,
       post,
+      rawQuery,
     ]
   );
 

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

@@ -75,20 +75,9 @@ function Inputs({
     return foundAttributeType === 'dynamiczone';
   }, [currentContentTypeLayout, fieldName]);
 
-  const inputType = useMemo(() => {
-    return getInputType(type);
-  }, [type]);
-
-  const inputValue = useMemo(() => {
-    // Fix for input file multipe
-    if (type === 'media' && !value) {
-      return [];
-    }
-
-    return value;
-  }, [type, value]);
+  const inputType = getInputType(type);
 
-  const step = getStep(type);
+  const inputValue = type === 'media' && !value ? [] : value;
 
   const isUserAllowedToEditField = useMemo(() => {
     const joinedName = fieldName.join('.');
@@ -159,36 +148,6 @@ function Inputs({
 
   const { label, description, placeholder, visible } = metadatas;
 
-  /**
-   * It decides whether using the default `step` accoding to its `inputType` or the one
-   * obtained from `metadatas`.
-   *
-   * The `metadatas.step` is returned when the `inputValue` is divisible by it or when the
-   * `inputValue` is empty, otherwise the default `step` is returned.
-   */
-  const inputStep = useMemo(() => {
-    if (!metadatas.step || (inputType !== 'datetime' && inputType !== 'time')) {
-      return step;
-    }
-
-    if (!inputValue) {
-      return metadatas.step;
-    }
-
-    let minutes;
-
-    /**
-     * Wtf is this?
-     */
-    if (inputType === 'datetime') {
-      minutes = parseInt(inputValue.substr(14, 2), 10);
-    } else if (inputType === 'time') {
-      minutes = parseInt(inputValue.slice(-2), 10);
-    }
-
-    return minutes % metadatas.step === 0 ? metadatas.step : step;
-  }, [inputType, inputValue, metadatas.step, step]);
-
   if (visible === false) {
     return null;
   }
@@ -271,7 +230,7 @@ function Inputs({
       options={options}
       placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
       required={fieldSchema.required || false}
-      step={inputStep}
+      step={getStep(type)}
       type={customFieldUid || inputType}
       // validations={validations}
       value={inputValue}
@@ -317,9 +276,6 @@ const getStep = (type) => {
     case 'float':
     case 'decimal':
       return 0.01;
-    case 'time':
-    case 'datetime':
-      return 15;
     default:
       return 1;
   }

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

@@ -1,24 +1,17 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useRef, useState, useMemo, useEffect } from 'react';
 
 import {
+  Status,
   Box,
-  Field,
-  FieldError,
-  FieldHint,
-  FieldLabel,
-  Icon,
   Link,
-  Status,
+  Icon,
+  Flex,
   TextButton,
-  Tooltip,
   Typography,
+  Tooltip,
   VisuallyHidden,
+  Combobox,
 } from '@strapi/design-system';
-/**
- * TODO: this will come in another PR.
- */
-// eslint-disable-next-line no-restricted-imports
-import { ReactSelect } from '@strapi/helper-plugin';
 import { Cross, Refresh } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { FixedSizeList as List } from 'react-window';
@@ -27,7 +20,6 @@ import styled from 'styled-components';
 import { usePrev } from '../../hooks';
 
 import { Option } from './components/Option';
-import { Relation } from './components/Relation';
 import { RelationItem } from './components/RelationItem';
 import { RelationList } from './components/RelationList';
 import { RELATION_GUTTER, RELATION_ITEM_HEIGHT } from './constants';
@@ -88,7 +80,7 @@ const RelationInput = ({
   searchResults,
   size,
 }) => {
-  const [value, setValue] = useState(null);
+  const [textValue, setTextValue] = useState('');
   const [overflow, setOverflow] = useState('');
 
   const listRef = useRef();
@@ -158,71 +150,10 @@ const RelationInput = ({
     };
   }, [paginatedRelations, relations, numberOfRelationsToDisplay, totalNumberOfRelations]);
 
-  /**
-   * --- ReactSelect Workaround START ---
-   */
-  /**
-   * 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;
-      });
+  const handleMenuOpen = (isOpen) => {
+    if (isOpen) {
+      onSearch();
     }
-
-    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);
-  };
-  /**
-   * --- ReactSelect Workaround END ---
-   */
-
-  const handleMenuOpen = () => {
-    setIsMenuOpen(true);
-    onSearch();
   };
 
   /**
@@ -250,122 +181,112 @@ const RelationInput = ({
   };
 
   useEffect(() => {
+    if (updatedRelationsWith.current === 'onChange') {
+      setTextValue('');
+    }
+
     if (
       updatedRelationsWith.current === 'onChange' &&
       relations.length !== previewRelationsLength
     ) {
       listRef.current.scrollToItem(relations.length, 'end');
+      updatedRelationsWith.current = undefined;
     } else if (
       updatedRelationsWith.current === 'loadMore' &&
       relations.length !== previewRelationsLength
     ) {
       listRef.current.scrollToItem(0, 'start');
+      updatedRelationsWith.current = undefined;
     }
-
-    updatedRelationsWith.current = undefined;
   }, [previewRelationsLength, relations]);
 
   const ariaDescriptionId = `${name}-item-instructions`;
 
   return (
-    <Field error={error} name={name} hint={description} id={id} required={required}>
-      <Relation
-        totalNumberOfRelations={totalNumberOfRelations}
-        size={size}
-        search={
-          <>
-            <FieldLabel action={labelAction}>{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);
-                onRelationConnect(relation);
-                updatedRelationsWith.current = 'onChange';
-              }}
-              onInputChange={(value) => {
-                setValue(value);
-                onSearch(value);
-              }}
-              onMenuClose={handleMenuClose}
-              onMenuOpen={handleMenuOpen}
-              menuIsOpen={isMenuOpen}
-              noOptionsMessage={() => noRelationsMessage}
-              onMenuScrollToBottom={() => {
-                if (searchResults.hasNextPage) {
-                  onSearchNextPage();
-                }
-              }}
-              placeholder={placeholder}
-              name={name}
-              value={value}
-            />
-          </>
-        }
-        loadMore={
-          shouldDisplayLoadMoreButton && (
-            <TextButton
-              disabled={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
-              onClick={handleLoadMore}
-              loading={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
-              startIcon={<Refresh />}
-            >
-              {labelLoadMore}
-            </TextButton>
-          )
-        }
-      >
-        {relations.length > 0 && (
-          <RelationList overflow={overflow}>
-            <VisuallyHidden id={ariaDescriptionId}>{listAriaDescription}</VisuallyHidden>
-            <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
-            <List
-              height={dynamicListHeight}
-              ref={listRef}
-              outerRef={outerListRef}
-              itemCount={totalNumberOfRelations}
-              itemSize={RELATION_ITEM_HEIGHT + RELATION_GUTTER}
-              itemData={{
-                name,
-                ariaDescribedBy: ariaDescriptionId,
-                canDrag: canReorder,
-                disabled,
-                handleCancel: onCancel,
-                handleDropItem: onDropItem,
-                handleGrabItem: onGrabItem,
-                iconButtonAriaLabel,
-                labelDisconnectRelation,
-                onRelationDisconnect,
-                publicationStateTranslations,
-                relations,
-                updatePositionOfRelation: handleUpdatePositionOfRelation,
-              }}
-              itemKey={(index) => `${relations[index].mainField}_${relations[index].id}`}
-              innerElementType="ol"
-            >
-              {ListItem}
-            </List>
-          </RelationList>
-        )}
-        {(description || error) && (
-          <Box paddingTop={2}>
-            <FieldHint />
-            <FieldError />
-          </Box>
+    <Flex gap={3} justifyContent="space-between" alignItems="end" wrap="wrap">
+      <Flex direction="column" alignItems="stretch" basis={size <= 6 ? '100%' : '70%'} gap={2}>
+        <Combobox
+          autocomplete="list"
+          error={error}
+          name={name}
+          hint={description}
+          id={id}
+          required={required}
+          label={label}
+          labelAction={labelAction}
+          disabled={disabled}
+          placeholder={placeholder}
+          hasMoreItems={searchResults.hasNextPage}
+          loading={searchResults.isLoading}
+          onOpenChange={handleMenuOpen}
+          noOptionsMessage={() => noRelationsMessage}
+          loadingMessage={loadingMessage}
+          onLoadMore={() => {
+            onSearchNextPage();
+          }}
+          textValue={textValue}
+          onChange={(relationId) => {
+            if (!relationId) {
+              return;
+            }
+            onRelationConnect(options.find((opt) => opt.id === relationId));
+            updatedRelationsWith.current = 'onChange';
+          }}
+          onTextValueChange={(text) => {
+            setTextValue(text);
+          }}
+          onInputChange={(event) => {
+            onSearch(event.currentTarget.value);
+          }}
+        >
+          {options.map((opt) => {
+            return <Option key={opt.id} {...opt} />;
+          })}
+        </Combobox>
+        {shouldDisplayLoadMoreButton && (
+          <TextButton
+            disabled={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
+            onClick={handleLoadMore}
+            loading={paginatedRelations.isLoading || paginatedRelations.isFetchingNextPage}
+            startIcon={<Refresh />}
+          >
+            {labelLoadMore}
+          </TextButton>
         )}
-      </Relation>
-    </Field>
+      </Flex>
+      {relations.length > 0 && (
+        <RelationList overflow={overflow}>
+          <VisuallyHidden id={ariaDescriptionId}>{listAriaDescription}</VisuallyHidden>
+          <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
+          <List
+            height={dynamicListHeight}
+            ref={listRef}
+            outerRef={outerListRef}
+            itemCount={totalNumberOfRelations}
+            itemSize={RELATION_ITEM_HEIGHT + RELATION_GUTTER}
+            itemData={{
+              name,
+              ariaDescribedBy: ariaDescriptionId,
+              canDrag: canReorder,
+              disabled,
+              handleCancel: onCancel,
+              handleDropItem: onDropItem,
+              handleGrabItem: onGrabItem,
+              iconButtonAriaLabel,
+              labelDisconnectRelation,
+              onRelationDisconnect,
+              publicationStateTranslations,
+              relations,
+              updatePositionOfRelation: handleUpdatePositionOfRelation,
+            }}
+            itemKey={(index) => `${relations[index].mainField}_${relations[index].id}`}
+            innerElementType="ol"
+          >
+            {ListItem}
+          </List>
+        </RelationList>
+      )}
+    </Flex>
   );
 };
 

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

@@ -1,10 +1,9 @@
 import React from 'react';
 
-import { Flex, Typography } from '@strapi/design-system';
+import { Flex, Typography, ComboboxOption } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { components } from 'react-select';
 import styled from 'styled-components';
 
 import { getTrad } from '../../../utils';
@@ -19,10 +18,8 @@ const StyledBullet = styled.div`
   border-radius: 50%;
 `;
 
-export const Option = (props) => {
+export const Option = ({ publicationState, mainField, id }) => {
   const { formatMessage } = useIntl();
-  const Component = components.Option;
-  const { publicationState, mainField, id } = props.data;
 
   if (publicationState) {
     const isDraft = publicationState === 'draft';
@@ -37,24 +34,29 @@ export const Option = (props) => {
     const title = isDraft ? formatMessage(draftMessage) : formatMessage(publishedMessage);
 
     return (
-      <Component {...props}>
+      <ComboboxOption value={id} textValue={mainField ?? id}>
         <Flex>
           <StyledBullet title={title} isDraft={isDraft} />
           <Typography ellipsis>{mainField ?? id}</Typography>
         </Flex>
-      </Component>
+      </ComboboxOption>
     );
   }
 
-  return <Component {...props}>{mainField ?? id}</Component>;
+  return (
+    <ComboboxOption value={id} textValue={mainField ?? id}>
+      {mainField ?? id}
+    </ComboboxOption>
+  );
+};
+
+Option.defaultProps = {
+  mainField: undefined,
+  publicationState: undefined,
 };
 
 Option.propTypes = {
-  isFocused: PropTypes.bool.isRequired,
-  data: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    isDraft: PropTypes.bool,
-    mainField: PropTypes.string,
-    publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  }).isRequired,
+  id: PropTypes.number.isRequired,
+  mainField: PropTypes.string,
+  publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 };

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

@@ -6,8 +6,8 @@ import styled from 'styled-components';
 
 const ShadowBox = styled(Box)`
   position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
+  flex: 1;
 
   &:before,
   &:after {