@strapi/content-manager 5.16.1 → 5.17.0-beta.0

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

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useForm, useField, useNotification, useRBAC, useFocusInputField } from '@strapi/admin/strapi-admin';
-import { Flex, Box, Link, TextButton, EmptyStateLayout, Field, Combobox, ComboboxOption, Typography, VisuallyHidden, useComposedRefs, IconButton } from '@strapi/design-system';
-import { ArrowClockwise, WarningCircle, Plus, Link as Link$1, Drag, Cross } from '@strapi/icons';
+import { useForm, useField, useNotification, useFocusInputField } from '@strapi/admin/strapi-admin';
+import { Flex, Box, Link, TextButton, Field, Combobox, ComboboxOption, Typography, VisuallyHidden, useComposedRefs, IconButton } from '@strapi/design-system';
+import { ArrowClockwise, Plus, Link as Link$1, Drag, Cross } from '@strapi/icons';
 import { generateNKeysBetween } from 'fractional-indexing';
 import pipe from 'lodash/fp/pipe';
 import { getEmptyImage } from 'react-dnd-html5-backend';
@@ -11,8 +11,6 @@ import { FixedSizeList } from 'react-window';
 import { styled } from 'styled-components';
 import { COLLECTION_TYPES } from '../../../../../constants/collections.mjs';
 import { ItemTypes } from '../../../../../constants/dragAndDrop.mjs';
-import { PERMISSIONS } from '../../../../../constants/plugin.mjs';
-import { DocumentRBAC, useDocumentRBAC } from '../../../../../features/DocumentRBAC.mjs';
 import { useDebounce } from '../../../../../hooks/useDebounce.mjs';
 import { useDocument } from '../../../../../hooks/useDocument.mjs';
 import { useDocumentContext } from '../../../../../hooks/useDocumentContext.mjs';
@@ -309,6 +307,7 @@ 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.useState('');
     const [searchParams, setSearchParams] = React.useState({
         _q: '',
         page: 1
@@ -316,6 +315,7 @@ const ONE_WAY_RELATIONS = [
     const { toggleNotification } = useNotification();
     const { currentDocumentMeta } = useDocumentContext('RelationsInput');
     const { formatMessage } = useIntl();
+    const fieldRef = useFocusInputField(name);
     const field = useField(name);
     const searchParamsDebounced = useDebounce(searchParams, 300);
     const [searchForTrigger, { data, isLoading }] = useLazySearchRelationsQuery();
@@ -356,6 +356,13 @@ 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)=>{
@@ -383,6 +390,21 @@ 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.useLayoutEffect(()=>{
+        setTextValue('');
+    }, [
+        field.value
+    ]);
     const relation = {
         collectionType: COLLECTION_TYPES,
         // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
@@ -390,26 +412,9 @@ const ONE_WAY_RELATIONS = [
         documentId: '',
         params: currentDocumentMeta.params
     };
-    const { permissions = [], isLoading: isLoadingPermissions, error } = useRBAC(PERMISSIONS.map((action)=>({
-            action,
-            subject: relation.model
-        })));
-    if (error) {
-        return /*#__PURE__*/ jsx(Flex, {
-            alignItems: "center",
-            height: "100%",
-            justifyContent: "center",
-            children: /*#__PURE__*/ jsx(EmptyStateLayout, {
-                icon: /*#__PURE__*/ jsx(WarningCircle, {
-                    width: "16rem"
-                }),
-                content: formatMessage({
-                    id: 'anErrorOccurred',
-                    defaultMessage: 'Whoops! Something went wrong. Please, try again.'
-                })
-            })
-        });
-    }
+    const { componentUID } = useComponent('RelationsField', ({ uid })=>({
+            componentUID: uid
+        }));
     return /*#__PURE__*/ jsxs(Field.Root, {
         error: field.error,
         hint: hint,
@@ -420,143 +425,90 @@ const ONE_WAY_RELATIONS = [
                 action: labelAction,
                 children: label
             }),
-            /*#__PURE__*/ jsx(DocumentRBAC, {
-                permissions: permissions,
-                model: relation.model,
-                children: /*#__PURE__*/ 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__*/ jsx(Field.Error, {}),
-            /*#__PURE__*/ jsx(Field.Hint, {})
-        ]
-    });
-};
-const RelationModalWithContext = ({ relation, name, placeholder, hasNextPage, isLoadingSearchRelations, isLoadingPermissions, handleChange, mainField, setSearchParams, fieldValue, data, ...props })=>{
-    const [textValue, setTextValue] = React.useState('');
-    const { formatMessage } = useIntl();
-    const canCreate = useDocumentRBAC('RelationModalWrapper', (state)=>state.canCreate);
-    const fieldRef = useFocusInputField(name);
-    const { componentUID } = 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.useLayoutEffect(()=>{
-        setTextValue('');
-    }, [
-        fieldValue
-    ]);
-    const handleSearch = async (search)=>{
-        setSearchParams((s)=>({
-                ...s,
-                _q: search,
-                page: 1
-            }));
-    };
-    return /*#__PURE__*/ jsx(RelationModalRenderer, {
-        children: ({ dispatch })=>/*#__PURE__*/ jsx(Combobox, {
-                ref: fieldRef,
-                creatable: "visible",
-                creatableDisabled: !canCreate,
-                createMessage: ()=>formatMessage({
-                        id: 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__*/ jsx(Plus, {
-                    fill: "neutral500"
-                }),
-                name: name,
-                autocomplete: "list",
-                placeholder: placeholder || formatMessage({
-                    id: getTranslation('relation.add'),
-                    defaultMessage: 'Add relation'
-                }),
-                hasMoreItems: hasNextPage,
-                loading: isLoadingSearchRelations || isLoadingPermissions,
-                onOpenChange: ()=>{
-                    handleSearch(textValue ?? '');
-                },
-                noOptionsMessage: ()=>formatMessage({
-                        id: getTranslation('relation.notAvailable'),
-                        defaultMessage: 'No relations available'
-                    }),
-                loadingMessage: formatMessage({
-                    id: 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 = getRelationLabel(opt, mainField);
-                    return /*#__PURE__*/ jsx(ComboboxOption, {
-                        value: opt.id.toString(),
+            /*#__PURE__*/ jsx(RelationModalRenderer, {
+                children: ({ dispatch })=>/*#__PURE__*/ jsx(Combobox, {
+                        ref: fieldRef,
+                        creatable: "visible",
+                        createMessage: ()=>formatMessage({
+                                id: getTranslation('relation.create'),
+                                defaultMessage: 'Create a relation'
+                            }),
+                        onCreateOption: ()=>{
+                            dispatch({
+                                type: 'GO_TO_RELATION',
+                                payload: {
+                                    document: relation,
+                                    shouldBypassConfirmation: false,
+                                    fieldToConnect: name,
+                                    fieldToConnectUID: componentUID
+                                }
+                            });
+                        },
+                        creatableStartIcon: /*#__PURE__*/ jsx(Plus, {
+                            fill: "neutral500"
+                        }),
+                        name: name,
+                        autocomplete: "list",
+                        placeholder: placeholder || formatMessage({
+                            id: getTranslation('relation.add'),
+                            defaultMessage: 'Add relation'
+                        }),
+                        hasMoreItems: hasNextPage,
+                        loading: isLoading,
+                        onOpenChange: ()=>{
+                            handleSearch(textValue ?? '');
+                        },
+                        noOptionsMessage: ()=>formatMessage({
+                                id: getTranslation('relation.notAvailable'),
+                                defaultMessage: 'No relations available'
+                            }),
+                        loadingMessage: formatMessage({
+                            id: getTranslation('relation.isLoading'),
+                            defaultMessage: 'Relations are loading'
+                        }),
+                        onLoadMore: handleLoadMore,
                         textValue: textValue,
-                        children: /*#__PURE__*/ jsxs(Flex, {
-                            gap: 2,
-                            justifyContent: "space-between",
-                            children: [
-                                /*#__PURE__*/ jsxs(Flex, {
+                        onChange: handleChange,
+                        onTextValueChange: (text)=>{
+                            setTextValue(text);
+                        },
+                        onInputChange: (event)=>{
+                            handleSearch(event.currentTarget.value);
+                        },
+                        ...props,
+                        children: options.map((opt)=>{
+                            const textValue = getRelationLabel(opt, mainField);
+                            return /*#__PURE__*/ jsx(ComboboxOption, {
+                                value: opt.id.toString(),
+                                textValue: textValue,
+                                children: /*#__PURE__*/ jsxs(Flex, {
                                     gap: 2,
+                                    justifyContent: "space-between",
                                     children: [
-                                        /*#__PURE__*/ jsx(Link$1, {
-                                            fill: "neutral500"
+                                        /*#__PURE__*/ jsxs(Flex, {
+                                            gap: 2,
+                                            children: [
+                                                /*#__PURE__*/ jsx(Link$1, {
+                                                    fill: "neutral500"
+                                                }),
+                                                /*#__PURE__*/ jsx(Typography, {
+                                                    ellipsis: true,
+                                                    children: textValue
+                                                })
+                                            ]
                                         }),
-                                        /*#__PURE__*/ jsx(Typography, {
-                                            ellipsis: true,
-                                            children: textValue
-                                        })
+                                        opt.status ? /*#__PURE__*/ jsx(DocumentStatus, {
+                                            status: opt.status
+                                        }) : null
                                     ]
-                                }),
-                                opt.status ? /*#__PURE__*/ jsx(DocumentStatus, {
-                                    status: opt.status
-                                }) : null
-                            ]
+                                })
+                            }, opt.id);
                         })
-                    }, opt.id);
-                })
-            })
+                    })
+            }),
+            /*#__PURE__*/ jsx(Field.Error, {}),
+            /*#__PURE__*/ jsx(Field.Hint, {})
+        ]
     });
 };
 /* -------------------------------------------------------------------------------------------------