@strapi/admin 4.11.2 → 4.11.4

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/constants.js

@@ -0,0 +1,90 @@
+export const ADMIN_PERMISSIONS_CE = {
+    contentManager: {
+      main: [],
+      collectionTypesConfigurations: [
+        {
+          action: 'plugin::content-manager.collection-types.configure-view',
+          subject: null,
+        },
+      ],
+      componentsConfigurations: [
+        {
+          action: 'plugin::content-manager.components.configure-layout',
+          subject: null,
+        },
+      ],
+      singleTypesConfigurations: [
+        {
+          action: 'plugin::content-manager.single-types.configure-view',
+          subject: null,
+        },
+      ],
+    },
+    marketplace: {
+      main: [{ action: 'admin::marketplace.read', subject: null }],
+      read: [{ action: 'admin::marketplace.read', subject: null }],
+    },
+    settings: {
+      roles: {
+        main: [
+          { action: 'admin::roles.create', subject: null },
+          { action: 'admin::roles.update', subject: null },
+          { action: 'admin::roles.read', subject: null },
+          { action: 'admin::roles.delete', subject: null },
+        ],
+        create: [{ action: 'admin::roles.create', subject: null }],
+        delete: [{ action: 'admin::roles.delete', subject: null }],
+        read: [{ action: 'admin::roles.read', subject: null }],
+        update: [{ action: 'admin::roles.update', subject: null }],
+      },
+      users: {
+        main: [
+          { action: 'admin::users.create', subject: null },
+          { action: 'admin::users.read', subject: null },
+          { action: 'admin::users.update', subject: null },
+          { action: 'admin::users.delete', subject: null },
+        ],
+        create: [{ action: 'admin::users.create', subject: null }],
+        delete: [{ action: 'admin::users.delete', subject: null }],
+        read: [{ action: 'admin::users.read', subject: null }],
+        update: [{ action: 'admin::users.update', subject: null }],
+      },
+      webhooks: {
+        main: [
+          { action: 'admin::webhooks.create', subject: null },
+          { action: 'admin::webhooks.read', subject: null },
+          { action: 'admin::webhooks.update', subject: null },
+          { action: 'admin::webhooks.delete', subject: null },
+        ],
+        create: [{ action: 'admin::webhooks.create', subject: null }],
+        delete: [{ action: 'admin::webhooks.delete', subject: null }],
+        read: [
+          { action: 'admin::webhooks.read', subject: null },
+          // NOTE: We need to check with the API
+          { action: 'admin::webhooks.update', subject: null },
+          { action: 'admin::webhooks.delete', subject: null },
+        ],
+        update: [{ action: 'admin::webhooks.update', subject: null }],
+      },
+      'api-tokens': {
+        main: [{ action: 'admin::api-tokens.access', subject: null }],
+        create: [{ action: 'admin::api-tokens.create', subject: null }],
+        delete: [{ action: 'admin::api-tokens.delete', subject: null }],
+        read: [{ action: 'admin::api-tokens.read', subject: null }],
+        update: [{ action: 'admin::api-tokens.update', subject: null }],
+        regenerate: [{ action: 'admin::api-tokens.regenerate', subject: null }],
+      },
+      'transfer-tokens': {
+        main: [{ action: 'admin::transfer.tokens.access', subject: null }],
+        create: [{ action: 'admin::transfer.tokens.create', subject: null }],
+        delete: [{ action: 'admin::transfer.tokens.delete', subject: null }],
+        read: [{ action: 'admin::transfer.tokens.read', subject: null }],
+        update: [{ action: 'admin::transfer.tokens.update', subject: null }],
+        regenerate: [{ action: 'admin::transfer.tokens.regenerate', subject: null }],
+      },
+      'project-settings': {
+        read: [{ action: 'admin::project-settings.read', subject: null }],
+        update: [{ action: 'admin::project-settings.update', subject: null }],
+      },
+    },
+  };

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

@@ -237,7 +237,15 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
   const onPost = useCallback(
     async (body, trackerProperty) => {
-      const endPoint = `${getRequestUrl(`collection-types/${slug}`)}${rawQuery}`;
+      /**
+       * If we're cloning we want to post directly to this endpoint
+       * so that the relations even if they're not listed in the EditView
+       * are correctly attached to the entry.
+       */
+      const endPoint =
+        typeof origin === 'string'
+          ? `${getRequestUrl(`collection-types/${slug}/clone/${origin}`)}${rawQuery}`
+          : `${getRequestUrl(`collection-types/${slug}`)}${rawQuery}`;
       try {
         // Show a loading button in the EditView/Header.js && lock the app => no navigation
         dispatch(setStatus('submit-pending'));
@@ -272,6 +280,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       }
     },
     [
+      origin,
       cleanReceivedData,
       displayErrors,
       replace,

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

@@ -241,14 +241,18 @@ const EditViewDataManagerProvider = ({
     });
   }, []);
 
-  const relationLoad = useCallback(({ target: { initialDataPath, modifiedDataPath, value } }) => {
-    dispatch({
-      type: 'LOAD_RELATION',
-      modifiedDataPath,
-      initialDataPath,
-      value,
-    });
-  }, []);
+  const relationLoad = useCallback(
+    ({ target: { initialDataPath, modifiedDataPath, value, modifiedDataOnly } }) => {
+      dispatch({
+        type: 'LOAD_RELATION',
+        modifiedDataPath,
+        initialDataPath,
+        value,
+        modifiedDataOnly,
+      });
+    },
+    []
+  );
 
   const addRepeatableComponentToField = dispatchAddComponent('ADD_REPEATABLE_COMPONENT_TO_FIELD');
 

package/admin/src/content-manager/components/EditViewDataManagerProvider/reducer.js

@@ -138,17 +138,16 @@ const reducer = (state, action) =>
           __temp_key__: keys[index],
         }));
 
-        set(
-          draftState,
-          initialDataPath,
-          uniqBy([...valuesWithKeys, ...initialDataRelations], 'id')
-        );
-
         /**
          * We need to set the value also on modifiedData, because initialData
          * and modifiedData need to stay in sync, so that the CM can compare
          * both states, to render the dirty UI state
          */
+        set(
+          draftState,
+          initialDataPath,
+          uniqBy([...valuesWithKeys, ...initialDataRelations], 'id')
+        );
         set(
           draftState,
           modifiedDataPath,

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 {

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

@@ -17,12 +17,14 @@ import { connect, diffRelations, normalizeRelation, normalizeSearchResults, sele
 
 export const RelationInputDataManager = ({
   error,
+  entityId,
   componentId,
   isComponentRelation,
   editable,
   description,
   intlLabel,
   isCreatingEntry,
+  isCloningEntry,
   isFieldAllowed,
   isFieldReadable,
   labelAction,
@@ -86,11 +88,12 @@ export const RelationInputDataManager = ({
         pageParams: {
           ...defaultParams,
           // eslint-disable-next-line no-nested-ternary
-          entityId: isCreatingEntry
-            ? undefined
-            : isComponentRelation
-            ? componentId
-            : initialData.id,
+          entityId:
+            isCreatingEntry || isCloningEntry
+              ? undefined
+              : isComponentRelation
+              ? componentId
+              : entityId,
           pageSize: SEARCH_RESULTS_TO_DISPLAY,
         },
       },
@@ -300,7 +303,7 @@ export const RelationInputDataManager = ({
       })} ${totalRelations > 0 ? `(${totalRelations})` : ''}`}
       labelAction={labelAction}
       labelLoadMore={
-        !isCreatingEntry
+        !isCreatingEntry || isCloningEntry
           ? formatMessage({
               id: getTrad('relation.loadMore'),
               defaultMessage: 'Load More',
@@ -372,6 +375,7 @@ export const RelationInputDataManager = ({
 
 RelationInputDataManager.defaultProps = {
   componentId: undefined,
+  entityId: undefined,
   editable: true,
   error: undefined,
   description: '',
@@ -384,6 +388,7 @@ RelationInputDataManager.defaultProps = {
 
 RelationInputDataManager.propTypes = {
   componentId: PropTypes.number,
+  entityId: PropTypes.number,
   editable: PropTypes.bool,
   error: PropTypes.string,
   description: PropTypes.string,
@@ -393,6 +398,7 @@ RelationInputDataManager.propTypes = {
     values: PropTypes.object,
   }).isRequired,
   labelAction: PropTypes.element,
+  isCloningEntry: PropTypes.bool.isRequired,
   isCreatingEntry: PropTypes.bool.isRequired,
   isComponentRelation: PropTypes.bool,
   isFieldAllowed: PropTypes.bool,