@strapi/content-manager 0.0.0-experimental.c23f51fc41b3ef5de081f427d07e87af93cdcb2c → 0.0.0-experimental.c2b08ee20b017fc174cccf35c56c39438b0237b0

package/dist/admin/pages/EditView/components/FormInputs/{Relations.mjs → Relations/Relations.mjs}

@@ -1,26 +1,28 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useQueryParams, useForm, useField, useNotification, useFocusInputField } from '@strapi/admin/strapi-admin';
-import { Flex, Box, Link, TextButton, Field, Combobox, ComboboxOption, Typography, VisuallyHidden, useComposedRefs, IconButton, Tooltip } from '@strapi/design-system';
-import { ArrowClockwise, Drag, Cross } from '@strapi/icons';
+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 { generateNKeysBetween } from 'fractional-indexing';
 import pipe from 'lodash/fp/pipe';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
-import { NavLink } from 'react-router-dom';
 import { FixedSizeList } from 'react-window';
 import { styled } from 'styled-components';
-import { COLLECTION_TYPES } from '../../../../constants/collections.mjs';
-import { ItemTypes } from '../../../../constants/dragAndDrop.mjs';
-import { useDebounce } from '../../../../hooks/useDebounce.mjs';
-import { useDoc } from '../../../../hooks/useDocument.mjs';
-import { useDragAndDrop, DROP_SENSITIVITY } from '../../../../hooks/useDragAndDrop.mjs';
-import { useGetRelationsQuery, useLazySearchRelationsQuery } from '../../../../services/relations.mjs';
-import { buildValidParams } from '../../../../utils/api.mjs';
-import { getRelationLabel } from '../../../../utils/relations.mjs';
-import { getTranslation } from '../../../../utils/translations.mjs';
-import { DocumentStatus } from '../DocumentStatus.mjs';
-import { useComponent } from './ComponentContext.mjs';
+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';
+import { useDragAndDrop, DROP_SENSITIVITY } from '../../../../../hooks/useDragAndDrop.mjs';
+import { useGetRelationsQuery, useLazySearchRelationsQuery } from '../../../../../services/relations.mjs';
+import { getRelationLabel } from '../../../../../utils/relations.mjs';
+import { getTranslation } from '../../../../../utils/translations.mjs';
+import { DocumentStatus } from '../../DocumentStatus.mjs';
+import { useComponent } from '../ComponentContext.mjs';
+import { RelationModalRenderer, getCollectionType } from './RelationModal.mjs';
 
 /**
  * Remove a relation, whether it's been already saved or not.
@@ -75,12 +77,11 @@ const ONE_WAY_RELATIONS = [
  * At present we do not expose this to plugin developers, however, they are able to overwrite it themselves should
  * they wish to do so.
  */ const RelationsField = /*#__PURE__*/ React.forwardRef(({ disabled, label, ...props }, ref)=>{
+    const { currentDocument, currentDocumentMeta } = useDocumentContext('RelationsField');
     const [currentPage, setCurrentPage] = React.useState(1);
-    const { document, model: documentModel } = useDoc();
-    const documentId = document?.documentId;
+    // Use the documentId from the actual document, not the params (meta)
+    const documentId = currentDocument.document?.documentId;
     const { formatMessage } = useIntl();
-    const [{ query }] = useQueryParams();
-    const params = buildValidParams(query);
     const isMorph = props.attribute.relation.toLowerCase().includes('morph');
     const isDisabled = isMorph || disabled;
     const { componentId, componentUID } = useComponent('RelationsField', ({ uid, id })=>({
@@ -93,30 +94,38 @@ const ONE_WAY_RELATIONS = [
     }, [
         isSubmitting
     ]);
+    const component = componentUID && currentDocument.components[componentUID];
     /**
      * We'll always have a documentId in a created entry, so we look for a componentId first.
      * Same with `uid` and `documentModel`.
-     */ const id = componentId ? componentId.toString() : documentId;
-    const model = componentUID ?? 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?.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
      * we only require the field on the component not the complete path since we query
      * individual components. Therefore we split the string and take the last item.
      */ const [targetField] = props.name.split('.').slice(-1);
+    const schemaAttributes = component ? component.attributes ?? {} : currentDocument.schema?.attributes ?? {};
+    /**
+     * Confirm the target field is related to the current document.
+     * Since relations can exist in a modal on top of the root document,
+     * we need to ensure we are fetching relations for the correct document (root document vs related document),
+     */ const isRelatedToCurrentDocument = Object.values(schemaAttributes).filter((attribute)=>attribute.type === 'relation' && 'target' in attribute && 'target' in props.attribute && attribute.target === props.attribute.target).length > 0;
     const { data, isLoading, isFetching } = useGetRelationsQuery({
         model,
         targetField,
         // below we don't run the query if there is no id.
-        id: id,
+        id,
         params: {
-            ...params,
+            ...currentDocumentMeta.params,
             pageSize: RELATIONS_TO_DISPLAY,
             page: currentPage
         }
     }, {
         refetchOnMountOrArgChange: true,
-        skip: !id,
+        skip: !id || !isRelatedToCurrentDocument,
         selectFromResult: (result)=>{
             return {
                 ...result,
@@ -182,7 +191,8 @@ const ONE_WAY_RELATIONS = [
             apiData: {
                 id: relation.id,
                 documentId: relation.documentId,
-                locale: relation.locale
+                locale: relation.locale,
+                isTemporary: true
             },
             status: relation.status,
             /**
@@ -225,10 +235,11 @@ const ONE_WAY_RELATIONS = [
                     /*#__PURE__*/ jsx(RelationsInput, {
                         disabled: isDisabled,
                         // NOTE: we should not default to using the documentId if the component is being created (componentUID is undefined)
-                        id: componentUID ? componentId ? `${componentId}` : '' : documentId,
+                        id: componentUID && component ? componentId ? `${componentId}` : '' : documentId,
                         label: `${label} ${relationsCount > 0 ? `(${relationsCount})` : ''}`,
                         model: model,
                         onChange: handleConnect,
+                        isRelatedToCurrentDocument: isRelatedToCurrentDocument,
                         ...props
                     }),
                     'pagination' in data && data.pagination && data.pagination.pageCount > data.pagination.page ? /*#__PURE__*/ jsx(TextButton, {
@@ -251,7 +262,10 @@ const ONE_WAY_RELATIONS = [
                 disabled: isDisabled,
                 name: props.name,
                 isLoading: isFetchingMoreRelations,
-                relationType: props.attribute.relation
+                relationType: props.attribute.relation,
+                // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
+                targetModel: props.attribute.targetModel,
+                mainField: props.mainField
             })
         ]
     });
@@ -294,16 +308,14 @@ 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, ...props })=>{
-    const [textValue, setTextValue] = React.useState('');
+ */ const RelationsInput = ({ hint, id, model, label, labelAction, name, mainField, placeholder, required, unique: _unique, 'aria-label': _ariaLabel, onChange, isRelatedToCurrentDocument, ...props })=>{
     const [searchParams, setSearchParams] = React.useState({
         _q: '',
         page: 1
     });
     const { toggleNotification } = useNotification();
-    const [{ query }] = useQueryParams();
+    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();
@@ -319,11 +331,13 @@ const ONE_WAY_RELATIONS = [
      * we only require the field on the component not the complete path since we query
      * individual components. Therefore we split the string and take the last item.
      */ const [targetField] = name.split('.').slice(-1);
+        // Return early if there is no relation to the document
+        if (!isRelatedToCurrentDocument) return;
         searchForTrigger({
             model,
             targetField,
             params: {
-                ...buildValidParams(query),
+                ...currentDocumentMeta.params,
                 id: id ?? '',
                 pageSize: 10,
                 idsToInclude: field.value?.disconnect?.map((rel)=>rel.id.toString()) ?? [],
@@ -337,17 +351,11 @@ const ONE_WAY_RELATIONS = [
         id,
         model,
         name,
-        query,
         searchForTrigger,
-        searchParamsDebounced
+        searchParamsDebounced,
+        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)=>{
@@ -375,6 +383,74 @@ const ONE_WAY_RELATIONS = [
      *
      */ onChange(relation);
     };
+    const relation = {
+        collectionType: COLLECTION_TYPES,
+        // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
+        model: props.attribute.targetModel,
+        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.'
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        error: field.error,
+        hint: hint,
+        name: name,
+        required: required,
+        children: [
+            /*#__PURE__*/ jsx(Field.Label, {
+                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;
@@ -385,31 +461,55 @@ const ONE_WAY_RELATIONS = [
                 }));
         }
     };
+    const options = data?.results ?? [];
     React.useLayoutEffect(()=>{
         setTextValue('');
     }, [
-        field.value
+        fieldValue
     ]);
-    return /*#__PURE__*/ jsxs(Field.Root, {
-        error: field.error,
-        hint: hint,
-        name: name,
-        required: required,
-        children: [
-            /*#__PURE__*/ jsx(Field.Label, {
-                action: labelAction,
-                children: label
-            }),
-            /*#__PURE__*/ jsx(Combobox, {
+    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",
+                autocomplete: {
+                    type: 'list',
+                    filter: 'contains'
+                },
                 placeholder: placeholder || formatMessage({
                     id: getTranslation('relation.add'),
                     defaultMessage: 'Add relation'
                 }),
                 hasMoreItems: hasNextPage,
-                loading: isLoading,
+                loading: isLoadingSearchRelations || isLoadingPermissions,
                 onOpenChange: ()=>{
                     handleSearch(textValue ?? '');
                 },
@@ -431,7 +531,7 @@ const ONE_WAY_RELATIONS = [
                     handleSearch(event.currentTarget.value);
                 },
                 ...props,
-                children: options.map((opt)=>{
+                children: options?.map((opt)=>{
                     const textValue = getRelationLabel(opt, mainField);
                     return /*#__PURE__*/ jsx(ComboboxOption, {
                         value: opt.id.toString(),
@@ -440,9 +540,17 @@ const ONE_WAY_RELATIONS = [
                             gap: 2,
                             justifyContent: "space-between",
                             children: [
-                                /*#__PURE__*/ jsx(Typography, {
-                                    ellipsis: true,
-                                    children: textValue
+                                /*#__PURE__*/ jsxs(Flex, {
+                                    gap: 2,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Link$1, {
+                                            fill: "neutral500"
+                                        }),
+                                        /*#__PURE__*/ jsx(Typography, {
+                                            ellipsis: true,
+                                            children: textValue
+                                        })
+                                    ]
                                 }),
                                 opt.status ? /*#__PURE__*/ jsx(DocumentStatus, {
                                     status: opt.status
@@ -451,17 +559,14 @@ const ONE_WAY_RELATIONS = [
                         })
                     }, opt.id);
                 })
-            }),
-            /*#__PURE__*/ jsx(Field.Error, {}),
-            /*#__PURE__*/ jsx(Field.Hint, {})
-        ]
+            })
     });
 };
 /* -------------------------------------------------------------------------------------------------
  * RelationsList
  * -----------------------------------------------------------------------------------------------*/ const RELATION_ITEM_HEIGHT = 50;
 const RELATION_GUTTER = 4;
-const RelationsList = ({ data, serverData, disabled, name, isLoading, relationType })=>{
+const RelationsList = ({ data, serverData, disabled, name, isLoading, relationType, targetModel, mainField })=>{
     const ariaDescriptionId = React.useId();
     const { formatMessage } = useIntl();
     const listRef = React.useRef(null);
@@ -545,8 +650,9 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
                     ...{
                         apiData: {
                             id: relation.id,
-                            documentId: relation.documentId,
-                            locale: relation.locale,
+                            documentId: relation.documentId ?? relation.apiData?.documentId ?? '',
+                            locale: relation.locale || relation.apiData?.locale,
+                            isTemporary: relation.apiData?.isTemporary,
                             position
                         }
                     }
@@ -625,7 +731,9 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
                     handleMoveItem,
                     name,
                     handleDisconnect,
-                    relations: data
+                    relations: data,
+                    targetModel,
+                    mainField
                 },
                 itemKey: (index)=>data[index].id,
                 innerElementType: "ol",
@@ -666,9 +774,26 @@ const ShadowBox = styled(Box)`
   }
 `;
 const ListItem = ({ data, index, style })=>{
-    const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations } = data;
+    const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations, targetModel, mainField } = data;
+    const { currentDocumentMeta } = useDocumentContext('RelationsField');
     const { formatMessage } = useIntl();
-    const { href, id, label, status } = relations[index];
+    const { href, id, label: originalLabel, status: originalStatus, documentId, apiData, locale } = relations[index];
+    /**
+   * The code above attempts to retrieve the updated value of a relation that has not yet been saved.
+   * This is necessary when a relation modal is opened, and the mainField or its status is updated.
+   * These changes need to be reflected in the initial relation field.
+   */ const collectionType = getCollectionType(href);
+    const isTemporary = apiData?.isTemporary ?? false;
+    const { document } = useDocument({
+        collectionType,
+        model: targetModel,
+        documentId: documentId ?? apiData?.documentId,
+        params: currentDocumentMeta.params
+    }, {
+        skip: !isTemporary
+    });
+    const label = isTemporary && document ? getRelationLabel(document, mainField) : originalLabel;
+    const status = isTemporary && document ? document?.status : originalStatus;
     const [{ handlerId, isDragging, handleKeyDown }, relationRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(canDrag && !disabled, {
         type: `${ItemTypes.RELATION}_${name}`,
         index,
@@ -690,6 +815,21 @@ const ListItem = ({ data, index, style })=>{
     }, [
         dragPreviewRef
     ]);
+    const safeDocumentId = documentId ?? apiData?.documentId;
+    const safeLocale = locale ?? apiData?.locale ?? null;
+    const documentMeta = React.useMemo(()=>({
+            documentId: safeDocumentId,
+            model: targetModel,
+            collectionType: getCollectionType(href),
+            params: {
+                locale: safeLocale
+            }
+        }), [
+        safeDocumentId,
+        href,
+        safeLocale,
+        targetModel
+    ]);
     return /*#__PURE__*/ jsx(Box, {
         style: style,
         tag: "li",
@@ -728,25 +868,17 @@ const ListItem = ({ data, index, style })=>{
                         /*#__PURE__*/ jsxs(Flex, {
                             width: "100%",
                             minWidth: 0,
+                            gap: 4,
                             justifyContent: "space-between",
                             children: [
                                 /*#__PURE__*/ jsx(Box, {
+                                    flex: 1,
                                     minWidth: 0,
                                     paddingTop: 1,
                                     paddingBottom: 1,
-                                    paddingRight: 4,
-                                    children: /*#__PURE__*/ jsx(Tooltip, {
-                                        description: label,
-                                        children: href ? /*#__PURE__*/ jsx(LinkEllipsis, {
-                                            tag: NavLink,
-                                            to: href,
-                                            isExternal: false,
-                                            children: label
-                                        }) : /*#__PURE__*/ jsx(Typography, {
-                                            textColor: disabled ? 'neutral600' : 'primary600',
-                                            ellipsis: true,
-                                            children: label
-                                        })
+                                    children: /*#__PURE__*/ jsx(RelationModalRenderer, {
+                                        relation: documentMeta,
+                                        children: label
                                     })
                                 }),
                                 status ? /*#__PURE__*/ jsx(DocumentStatus, {