Merge pull request #2694 from payloadcms/fix/rel-drawer-save

fix: add new relationship drawer onSave handling

src/admin/components/elements/DocumentDrawer/types.ts

@@ -1,14 +1,10 @@
 import React, { HTMLAttributes } from 'react';
-import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import { Props as EditViewProps } from '../../views/collections/Edit/types';
 
 export type DocumentDrawerProps = {
   collectionSlug: string
   id?: string
-  onSave?: (json: {
-    doc: Record<string, any>
-    message: string
-    collectionConfig: SanitizedCollectionConfig
-  }) => void
+  onSave?: EditViewProps['onSave']
   customHeader?: React.ReactNode
   drawerSlug?: string
 }

src/admin/components/forms/field-types/Relationship/AddNew/index.tsx

@@ -11,12 +11,21 @@ import { getTranslation } from '../../../../../../utilities/getTranslation';
 import Tooltip from '../../../../elements/Tooltip';
 import { useDocumentDrawer } from '../../../../elements/DocumentDrawer';
 import { useConfig } from '../../../../utilities/Config';
+import { Props as EditViewProps } from '../../../../views/collections/Edit/types';
+import { Value } from '../types';
 
 import './index.scss';
 
 const baseClass = 'relationship-add-new';
 
-export const AddNewRelation: React.FC<Props> = ({ path, hasMany, relationTo, value, setValue, dispatchOptions }) => {
+export const AddNewRelation: React.FC<Props> = ({
+  path,
+  hasMany,
+  relationTo,
+  value,
+  setValue,
+  dispatchOptions,
+}) => {
   const relatedCollections = useRelatedCollections(relationTo);
   const { permissions } = useAuth();
   const [show, setShow] = useState(false);
@@ -36,30 +45,43 @@ export const AddNewRelation: React.FC<Props> = ({ path, hasMany, relationTo, val
     collectionSlug: collectionConfig?.slug,
   });
 
-  const onSave = useCallback((json) => {
-    const newValue = Array.isArray(relationTo) ? {
-      relationTo: collectionConfig.slug,
-      value: json.doc.id,
-    } : json.doc.id;
+  const onSave: EditViewProps['onSave'] = useCallback(({
+    operation,
+    doc,
+  }) => {
+    if (operation === 'create') {
+      const newValue: Value = Array.isArray(relationTo) ? {
+        relationTo: collectionConfig.slug,
+        value: doc.id,
+      } : doc.id;
 
-    dispatchOptions({
-      type: 'ADD',
-      collection: collectionConfig,
-      docs: [
-        json.doc,
-      ],
-      sort: true,
-      i18n,
-      config,
-    });
+      // ensure the value is not already in the array
+      const isNewValue = Array.isArray(relationTo) && Array.isArray(value)
+        ? !value.some((v) => v && typeof v === 'object' && v.value === doc.id)
+        : value !== doc.id;
 
-    if (hasMany) {
-      setValue([...(Array.isArray(value) ? value : []), newValue]);
-    } else {
-      setValue(newValue);
+      if (isNewValue) {
+        dispatchOptions({
+          type: 'ADD',
+          collection: collectionConfig,
+          docs: [
+            doc,
+          ],
+          sort: true,
+          i18n,
+          config,
+        });
+
+
+        if (hasMany) {
+          setValue([...(Array.isArray(value) ? value : []), newValue]);
+        } else {
+          setValue(newValue);
+        }
+      }
+
+      setSelectedCollection(undefined);
     }
-
-    setSelectedCollection(undefined);
   }, [relationTo, collectionConfig, dispatchOptions, i18n, hasMany, setValue, value, config]);
 
   const onPopopToggle = useCallback((state) => {

src/admin/components/forms/field-types/Relationship/AddNew/types.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Action } from '../types';
+import { Action, OptionGroup, Value } from '../types';
 
 export type Props = {
   hasMany: boolean
   relationTo: string | string[]
   path: string
-  value: unknown
+  value: Value | Value[]
+  options: OptionGroup[]
   setValue: (value: unknown) => void
   dispatchOptions: React.Dispatch<Action>
 }

src/admin/components/forms/field-types/Relationship/index.tsx

@@ -450,7 +450,7 @@ const Relationship: React.FC<Props> = (props) => {
           />
           {!readOnly && allowCreate && (
             <AddNewRelation
-              {...{ path: pathOrName, hasMany, relationTo, value, setValue, dispatchOptions }}
+              {...{ path: pathOrName, hasMany, relationTo, value, setValue, dispatchOptions, options }}
             />
           )}
         </div>

src/admin/components/views/collections/Edit/Default.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useConfig } from '../../../utilities/Config';
@@ -43,7 +43,7 @@ const DefaultEditView: React.FC<Props> = (props) => {
     collection,
     isEditing,
     data,
-    onSave,
+    onSave: onSaveFromProps,
     permissions,
     isLoading,
     internalState,
@@ -78,6 +78,15 @@ const DefaultEditView: React.FC<Props> = (props) => {
     isEditing && `${baseClass}--is-editing`,
   ].filter(Boolean).join(' ');
 
+  const onSave = useCallback((json) => {
+    if (typeof onSaveFromProps === 'function') {
+      onSaveFromProps({
+        ...json,
+        operation: id ? 'update' : 'create',
+      });
+    }
+  }, [id, onSaveFromProps]);
+
   const operation = isEditing ? 'update' : 'create';
 
   return (

src/admin/components/views/collections/Edit/types.ts

@@ -11,7 +11,12 @@ export type IndexProps = {
 
 export type Props = IndexProps & {
   data: Document
-  onSave?: () => void
+  onSave?: (json: Record<string, unknown> & {
+    doc: Record<string, any>
+    message: string
+    collectionConfig: SanitizedCollectionConfig
+    operation: 'create' | 'update',
+  }) => void
   id?: string
   permissions: CollectionPermission
   isLoading: boolean