@strapi/content-manager 0.0.0-experimental.8bf99b7c43ed372264c198d347a2ada9dfed174d → 0.0.0-experimental.8c28a74d1219c09f4ee67402fd3a26f182c4990a

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 { useQueryParams, useForm, useField, useNotification, useFocusInputField } from '@strapi/admin/strapi-admin';
+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, Drag, Cross } from '@strapi/icons';
+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,16 +11,16 @@ import { FixedSizeList } from 'react-window';
 import { styled } from 'styled-components';
 import { COLLECTION_TYPES } from '../../../../../constants/collections.mjs';
 import { ItemTypes } from '../../../../../constants/dragAndDrop.mjs';
-import { useDocumentContext } from '../../../../../features/DocumentContext.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 { 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 { RelationModalForm, getCollectionType } from './RelationModal.mjs';
+import { RelationModalRenderer, getCollectionType } from './RelationModal.mjs';
 
 /**
  * Remove a relation, whether it's been already saved or not.
@@ -75,17 +75,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 currentDocumentMeta = useDocumentContext('RelationsField', (state)=>state.meta);
-    const currentDocument = useDocumentContext('RelationsField', (state)=>state.document);
-    const rootDocumentMeta = useDocumentContext('RelationsField', (state)=>state.rootDocumentMeta);
+    const { currentDocument, currentDocumentMeta } = useDocumentContext('RelationsField');
     const [currentPage, setCurrentPage] = React.useState(1);
-    const isRootDocument = rootDocumentMeta.documentId === currentDocumentMeta.documentId;
-    const documentMeta = isRootDocument ? rootDocumentMeta : currentDocumentMeta;
     // Use the documentId from the actual document, not the params (meta)
     const documentId = currentDocument.document?.documentId;
     const { formatMessage } = useIntl();
-    const [{ query }] = useQueryParams();
-    const params = documentMeta.params ?? buildValidParams(query);
     const isMorph = props.attribute.relation.toLowerCase().includes('morph');
     const isDisabled = isMorph || disabled;
     const { componentId, componentUID } = useComponent('RelationsField', ({ uid, id })=>({
@@ -102,7 +96,7 @@ 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`.
-     */ const model = component ? component.uid : documentMeta.model;
+     */ const model = component ? component.uid : currentDocumentMeta.model;
     const id = component && componentId ? componentId.toString() : documentId;
     /**
      * The `name` prop is a complete path to the field, e.g. `field1.field2.field3`.
@@ -122,7 +116,7 @@ const ONE_WAY_RELATIONS = [
         // below we don't run the query if there is no id.
         id,
         params: {
-            ...params,
+            ...currentDocumentMeta.params,
             pageSize: RELATIONS_TO_DISPLAY,
             page: currentPage
         }
@@ -194,7 +188,8 @@ const ONE_WAY_RELATIONS = [
             apiData: {
                 id: relation.id,
                 documentId: relation.documentId,
-                locale: relation.locale
+                locale: relation.locale,
+                isTemporary: true
             },
             status: relation.status,
             /**
@@ -266,7 +261,8 @@ const ONE_WAY_RELATIONS = [
                 isLoading: isFetchingMoreRelations,
                 relationType: props.attribute.relation,
                 // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
-                targetModel: props.attribute.targetModel
+                targetModel: props.attribute.targetModel,
+                mainField: props.mainField
             })
         ]
     });
@@ -316,11 +312,7 @@ const ONE_WAY_RELATIONS = [
         page: 1
     });
     const { toggleNotification } = useNotification();
-    const [{ query }] = useQueryParams();
-    const currentDocumentMeta = useDocumentContext('RelationsInput', (state)=>state.meta);
-    const rootDocumentMeta = useDocumentContext('RelationsInput', (state)=>state.rootDocumentMeta);
-    const isRootDocument = rootDocumentMeta.documentId === currentDocumentMeta.documentId;
-    const documentMeta = isRootDocument ? rootDocumentMeta : currentDocumentMeta;
+    const { currentDocumentMeta } = useDocumentContext('RelationsInput');
     const { formatMessage } = useIntl();
     const fieldRef = useFocusInputField(name);
     const field = useField(name);
@@ -340,12 +332,11 @@ const ONE_WAY_RELATIONS = [
      */ const [targetField] = name.split('.').slice(-1);
         // Return early if there is no relation to the document
         if (!isRelatedToCurrentDocument) return;
-        const params = documentMeta.params ?? buildValidParams(query);
         searchForTrigger({
             model,
             targetField,
             params: {
-                ...params,
+                ...currentDocumentMeta.params,
                 id: id ?? '',
                 pageSize: 10,
                 idsToInclude: field.value?.disconnect?.map((rel)=>rel.id.toString()) ?? [],
@@ -359,11 +350,10 @@ const ONE_WAY_RELATIONS = [
         id,
         model,
         name,
-        query,
         searchForTrigger,
         searchParamsDebounced,
         isRelatedToCurrentDocument,
-        documentMeta
+        currentDocumentMeta.params
     ]);
     const handleSearch = async (search)=>{
         setSearchParams((s)=>({
@@ -414,6 +404,16 @@ const ONE_WAY_RELATIONS = [
     }, [
         field.value
     ]);
+    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 { componentUID } = useComponent('RelationsField', ({ uid })=>({
+            componentUID: uid
+        }));
     return /*#__PURE__*/ jsxs(Field.Root, {
         error: field.error,
         hint: hint,
@@ -424,57 +424,86 @@ const ONE_WAY_RELATIONS = [
                 action: labelAction,
                 children: label
             }),
-            /*#__PURE__*/ jsx(Combobox, {
-                ref: fieldRef,
-                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,
-                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__*/ jsx(Typography, {
-                                    ellipsis: true,
-                                    children: textValue
-                                }),
-                                opt.status ? /*#__PURE__*/ jsx(DocumentStatus, {
-                                    status: opt.status
-                                }) : null
-                            ]
+                        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__*/ 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
+                                        }) : null
+                                    ]
+                                })
+                            }, opt.id);
                         })
-                    }, opt.id);
-                })
+                    })
             }),
             /*#__PURE__*/ jsx(Field.Error, {}),
             /*#__PURE__*/ jsx(Field.Hint, {})
@@ -485,7 +514,7 @@ const ONE_WAY_RELATIONS = [
  * RelationsList
  * -----------------------------------------------------------------------------------------------*/ const RELATION_ITEM_HEIGHT = 50;
 const RELATION_GUTTER = 4;
-const RelationsList = ({ data, serverData, disabled, name, isLoading, relationType, targetModel })=>{
+const RelationsList = ({ data, serverData, disabled, name, isLoading, relationType, targetModel, mainField })=>{
     const ariaDescriptionId = React.useId();
     const { formatMessage } = useIntl();
     const listRef = React.useRef(null);
@@ -571,6 +600,7 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
                             id: relation.id,
                             documentId: relation.documentId ?? relation.apiData?.documentId ?? '',
                             locale: relation.locale || relation.apiData?.locale,
+                            isTemporary: relation.apiData?.isTemporary,
                             position
                         }
                     }
@@ -650,7 +680,8 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
                     name,
                     handleDisconnect,
                     relations: data,
-                    targetModel
+                    targetModel,
+                    mainField
                 },
                 itemKey: (index)=>data[index].id,
                 innerElementType: "ol",
@@ -691,9 +722,26 @@ const ShadowBox = styled(Box)`
   }
 `;
 const ListItem = ({ data, index, style })=>{
-    const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations, targetModel } = 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, documentId, apiData, locale } = 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,
@@ -715,6 +763,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",
@@ -753,23 +816,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(RelationModalForm, {
-                                        triggerButtonLabel: label,
-                                        relation: {
-                                            documentId: documentId ?? apiData?.documentId,
-                                            model: targetModel,
-                                            collectionType: getCollectionType(href),
-                                            params: {
-                                                locale: locale || apiData?.locale || null
-                                            }
-                                        }
+                                    children: /*#__PURE__*/ jsx(RelationModalRenderer, {
+                                        relation: documentMeta,
+                                        children: label
                                     })
                                 }),
                                 status ? /*#__PURE__*/ jsx(DocumentStatus, {