@strapi/content-manager 0.0.0-next.d8f8da8f5b333be4a20563a1a15cd61350139956 → 0.0.0-next.da19c0501ff87d14fb664b55b8e0630d3c548485

package/dist/admin/pages/EditView/components/FormInputs/Relations/Relations.js

@@ -13,6 +13,8 @@ var reactWindow = require('react-window');
 var styledComponents = require('styled-components');
 var collections = require('../../../../../constants/collections.js');
 var dragAndDrop = require('../../../../../constants/dragAndDrop.js');
+var plugin = require('../../../../../constants/plugin.js');
+var DocumentRBAC = require('../../../../../features/DocumentRBAC.js');
 var useDebounce = require('../../../../../hooks/useDebounce.js');
 var useDocument = require('../../../../../hooks/useDocument.js');
 var useDocumentContext = require('../../../../../hooks/useDocumentContext.js');
@@ -117,8 +119,9 @@ const ONE_WAY_RELATIONS = [
     /**
      * We'll always have a documentId in a created entry, so we look for a componentId first.
      * Same with `uid` and `documentModel`.
+     * The componentId is empty when adding a new component in a repeatable. Let it be null to skip isRelatedToCurrentDocument
      */ const model = component ? component.uid : currentDocumentMeta.model;
-    const id = component && componentId ? componentId.toString() : documentId;
+    const id = component ? componentId?.toString() : documentId;
     /**
      * The `name` prop is a complete path to the field, e.g. `field1.field2.field3`.
      * Where the above example would a nested field within two components, however
@@ -327,7 +330,6 @@ const ONE_WAY_RELATIONS = [
  * @description Contains all the logic for the combobox that can search
  * for relations and then add them to the field's connect array.
  */ const RelationsInput = ({ hint, id, model, label, labelAction, name, mainField, placeholder, required, unique: _unique, 'aria-label': _ariaLabel, onChange, isRelatedToCurrentDocument, ...props })=>{
-    const [textValue, setTextValue] = React__namespace.useState('');
     const [searchParams, setSearchParams] = React__namespace.useState({
         _q: '',
         page: 1
@@ -335,7 +337,6 @@ const ONE_WAY_RELATIONS = [
     const { toggleNotification } = strapiAdmin.useNotification();
     const { currentDocumentMeta } = useDocumentContext.useDocumentContext('RelationsInput');
     const { formatMessage } = reactIntl.useIntl();
-    const fieldRef = strapiAdmin.useFocusInputField(name);
     const field = strapiAdmin.useField(name);
     const searchParamsDebounced = useDebounce.useDebounce(searchParams, 300);
     const [searchForTrigger, { data, isLoading }] = relations.useLazySearchRelationsQuery();
@@ -376,13 +377,6 @@ const ONE_WAY_RELATIONS = [
         isRelatedToCurrentDocument,
         currentDocumentMeta.params
     ]);
-    const handleSearch = async (search)=>{
-        setSearchParams((s)=>({
-                ...s,
-                _q: search,
-                page: 1
-            }));
-    };
     const hasNextPage = data?.pagination ? data.pagination.page < data.pagination.pageCount : false;
     const options = data?.results ?? [];
     const handleChange = (relationId)=>{
@@ -410,21 +404,6 @@ const ONE_WAY_RELATIONS = [
      *
      */ onChange(relation);
     };
-    const handleLoadMore = ()=>{
-        if (!data || !data.pagination) {
-            return;
-        } else if (data.pagination.page < data.pagination.pageCount) {
-            setSearchParams((s)=>({
-                    ...s,
-                    page: s.page + 1
-                }));
-        }
-    };
-    React__namespace.useLayoutEffect(()=>{
-        setTextValue('');
-    }, [
-        field.value
-    ]);
     const relation = {
         collectionType: collections.COLLECTION_TYPES,
         // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
@@ -432,9 +411,26 @@ const ONE_WAY_RELATIONS = [
         documentId: '',
         params: currentDocumentMeta.params
     };
-    const { componentUID } = ComponentContext.useComponent('RelationsField', ({ uid })=>({
-            componentUID: uid
-        }));
+    const { permissions = [], isLoading: isLoadingPermissions, error } = strapiAdmin.useRBAC(plugin.PERMISSIONS.map((action)=>({
+            action,
+            subject: relation.model
+        })));
+    if (error) {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            alignItems: "center",
+            height: "100%",
+            justifyContent: "center",
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.EmptyStateLayout, {
+                icon: /*#__PURE__*/ jsxRuntime.jsx(Icons.WarningCircle, {
+                    width: "16rem"
+                }),
+                content: formatMessage({
+                    id: 'anErrorOccurred',
+                    defaultMessage: 'Whoops! Something went wrong. Please, try again.'
+                })
+            })
+        });
+    }
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
         error: field.error,
         hint: hint,
@@ -445,90 +441,146 @@ const ONE_WAY_RELATIONS = [
                 action: labelAction,
                 children: label
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(RelationModal.RelationModalRenderer, {
-                children: ({ dispatch })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Combobox, {
-                        ref: fieldRef,
-                        creatable: "visible",
-                        createMessage: ()=>formatMessage({
-                                id: translations.getTranslation('relation.create'),
-                                defaultMessage: 'Create a relation'
-                            }),
-                        onCreateOption: ()=>{
-                            dispatch({
-                                type: 'GO_TO_RELATION',
-                                payload: {
-                                    document: relation,
-                                    shouldBypassConfirmation: false,
-                                    fieldToConnect: name,
-                                    fieldToConnectUID: componentUID
-                                }
-                            });
-                        },
-                        creatableStartIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Plus, {
-                            fill: "neutral500"
-                        }),
-                        name: name,
-                        autocomplete: "list",
-                        placeholder: placeholder || formatMessage({
-                            id: translations.getTranslation('relation.add'),
-                            defaultMessage: 'Add relation'
-                        }),
-                        hasMoreItems: hasNextPage,
-                        loading: isLoading,
-                        onOpenChange: ()=>{
-                            handleSearch(textValue ?? '');
-                        },
-                        noOptionsMessage: ()=>formatMessage({
-                                id: translations.getTranslation('relation.notAvailable'),
-                                defaultMessage: 'No relations available'
-                            }),
-                        loadingMessage: formatMessage({
-                            id: translations.getTranslation('relation.isLoading'),
-                            defaultMessage: 'Relations are loading'
-                        }),
-                        onLoadMore: handleLoadMore,
+            /*#__PURE__*/ jsxRuntime.jsx(DocumentRBAC.DocumentRBAC, {
+                permissions: permissions,
+                model: relation.model,
+                children: /*#__PURE__*/ jsxRuntime.jsx(RelationModalWithContext, {
+                    relation: relation,
+                    name: name,
+                    placeholder: placeholder,
+                    hasNextPage: hasNextPage,
+                    isLoadingPermissions: isLoadingPermissions,
+                    isLoadingSearchRelations: isLoading,
+                    handleChange: handleChange,
+                    setSearchParams: setSearchParams,
+                    data: data,
+                    mainField: mainField,
+                    fieldValue: field.value,
+                    ...props
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {})
+        ]
+    });
+};
+const RelationModalWithContext = ({ relation, name, placeholder, hasNextPage, isLoadingSearchRelations, isLoadingPermissions, handleChange, mainField, setSearchParams, fieldValue, data, ...props })=>{
+    const [textValue, setTextValue] = React__namespace.useState('');
+    const { formatMessage } = reactIntl.useIntl();
+    const canCreate = DocumentRBAC.useDocumentRBAC('RelationModalWrapper', (state)=>state.canCreate);
+    const fieldRef = strapiAdmin.useFocusInputField(name);
+    const { componentUID } = ComponentContext.useComponent('RelationsField', ({ uid })=>({
+            componentUID: uid
+        }));
+    const handleLoadMore = ()=>{
+        if (!data || !data.pagination) {
+            return;
+        } else if (data.pagination.page < data.pagination.pageCount) {
+            setSearchParams((s)=>({
+                    ...s,
+                    page: s.page + 1
+                }));
+        }
+    };
+    const options = data?.results ?? [];
+    React__namespace.useLayoutEffect(()=>{
+        setTextValue('');
+    }, [
+        fieldValue
+    ]);
+    const handleSearch = async (search)=>{
+        setSearchParams((s)=>({
+                ...s,
+                _q: search,
+                page: 1
+            }));
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(RelationModal.RelationModalRenderer, {
+        children: ({ dispatch })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Combobox, {
+                ref: fieldRef,
+                creatable: "visible",
+                creatableDisabled: !canCreate,
+                createMessage: ()=>formatMessage({
+                        id: translations.getTranslation('relation.create'),
+                        defaultMessage: 'Create a relation'
+                    }),
+                onCreateOption: ()=>{
+                    if (canCreate) {
+                        dispatch({
+                            type: 'GO_TO_RELATION',
+                            payload: {
+                                document: relation,
+                                shouldBypassConfirmation: false,
+                                fieldToConnect: name,
+                                fieldToConnectUID: componentUID
+                            }
+                        });
+                    }
+                },
+                creatableStartIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Plus, {
+                    fill: "neutral500"
+                }),
+                name: name,
+                autocomplete: {
+                    type: 'list',
+                    filter: 'contains'
+                },
+                placeholder: placeholder || formatMessage({
+                    id: translations.getTranslation('relation.add'),
+                    defaultMessage: 'Add relation'
+                }),
+                hasMoreItems: hasNextPage,
+                loading: isLoadingSearchRelations || isLoadingPermissions,
+                onOpenChange: ()=>{
+                    handleSearch(textValue ?? '');
+                },
+                noOptionsMessage: ()=>formatMessage({
+                        id: translations.getTranslation('relation.notAvailable'),
+                        defaultMessage: 'No relations available'
+                    }),
+                loadingMessage: formatMessage({
+                    id: translations.getTranslation('relation.isLoading'),
+                    defaultMessage: 'Relations are loading'
+                }),
+                onLoadMore: handleLoadMore,
+                textValue: textValue,
+                onChange: handleChange,
+                onTextValueChange: (text)=>{
+                    setTextValue(text);
+                },
+                onInputChange: (event)=>{
+                    handleSearch(event.currentTarget.value);
+                },
+                ...props,
+                children: options?.map((opt)=>{
+                    const textValue = relations$1.getRelationLabel(opt, mainField);
+                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.ComboboxOption, {
+                        value: opt.id.toString(),
                         textValue: textValue,
-                        onChange: handleChange,
-                        onTextValueChange: (text)=>{
-                            setTextValue(text);
-                        },
-                        onInputChange: (event)=>{
-                            handleSearch(event.currentTarget.value);
-                        },
-                        ...props,
-                        children: options.map((opt)=>{
-                            const textValue = relations$1.getRelationLabel(opt, mainField);
-                            return /*#__PURE__*/ jsxRuntime.jsx(designSystem.ComboboxOption, {
-                                value: opt.id.toString(),
-                                textValue: textValue,
-                                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            gap: 2,
+                            justifyContent: "space-between",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                                     gap: 2,
-                                    justifyContent: "space-between",
                                     children: [
-                                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                                            gap: 2,
-                                            children: [
-                                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {
-                                                    fill: "neutral500"
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                                    ellipsis: true,
-                                                    children: textValue
-                                                })
-                                            ]
+                                        /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {
+                                            fill: "neutral500"
                                         }),
-                                        opt.status ? /*#__PURE__*/ jsxRuntime.jsx(DocumentStatus.DocumentStatus, {
-                                            status: opt.status
-                                        }) : null
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                            ellipsis: true,
+                                            children: textValue
+                                        })
                                     ]
-                                })
-                            }, opt.id);
+                                }),
+                                opt.status ? /*#__PURE__*/ jsxRuntime.jsx(DocumentStatus.DocumentStatus, {
+                                    status: opt.status
+                                }) : null
+                            ]
                         })
-                    })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {}),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {})
-        ]
+                    }, opt.id);
+                })
+            })
     });
 };
 /* -------------------------------------------------------------------------------------------------
@@ -744,6 +796,7 @@ const ShadowBox = styledComponents.styled(designSystem.Box)`
 `;
 const ListItem = ({ data, index, style })=>{
     const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations, targetModel, mainField } = data;
+    const isDesktop = strapiAdmin.useIsDesktop();
     const { currentDocumentMeta } = useDocumentContext.useDocumentContext('RelationsField');
     const { formatMessage } = reactIntl.useIntl();
     const { href, id, label: originalLabel, status: originalStatus, documentId, apiData, locale } = relations[index];
@@ -820,7 +873,7 @@ const ListItem = ({ data, index, style })=>{
                 /*#__PURE__*/ jsxRuntime.jsxs(FlexWrapper, {
                     gap: 1,
                     children: [
-                        canDrag ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        canDrag && isDesktop ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
                             tag: "div",
                             role: "button",
                             tabIndex: 0,