fix(ui): should select document after creation from relationship field (#12842)

### What?
After creating a new document from a relationship field, this doc should
automatically become the selected document for that relationship field.
This is the expected and current behavior. However, when the
relationship ties to a collection with autosave enabled, this does not
happen.

### Why?
This is expected behavior and should still happen when the relationship
is using an autosave enabled collection.

### How?
1. The logic in `addNewRelation` contained an `if` statement that
checked for `operation === 'create'` - however when autosave is enabled,
the `create` operation runs on the first data update and subsequently it
is a `update` operation.
2. The `onSave` from the document drawer provider was not being run as
part of the autosave workflow.

#### Reported by client.

Author: jessrynkar

packages/ui/src/elements/AddNewRelation/index.tsx

@@ -52,7 +52,13 @@ export const AddNewRelation: React.FC<Props> = ({
 
   const onSave: DocumentDrawerContextType['onSave'] = useCallback(
     ({ doc, operation }) => {
-      if (operation === 'create') {
+      // if autosave is enabled, the operation will be 'update'
+      const isAutosaveEnabled =
+        typeof collectionConfig?.versions?.drafts === 'object'
+          ? collectionConfig.versions.drafts.autosave
+          : false
+
+      if (operation === 'create' || (operation === 'update' && isAutosaveEnabled)) {
         // ensure the value is not already in the array
         let isNewValue = false
         if (!value) {

packages/ui/src/elements/Autosave/index.tsx

@@ -23,6 +23,7 @@ import { useLocale } from '../../providers/Locale/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { formatTimeToNow } from '../../utilities/formatDocTitle/formatDateTitle.js'
 import { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.js'
+import { useDocumentDrawerContext } from '../DocumentDrawer/Provider.js'
 import { LeaveWithoutSaving } from '../LeaveWithoutSaving/index.js'
 import './index.scss'
 
@@ -56,6 +57,8 @@ export const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc })
     updateSavedDocumentData,
   } = useDocumentInfo()
 
+  const { onSave: onSaveFromDocumentDrawer } = useDocumentDrawerContext()
+
   const { reportUpdate } = useDocumentEvents()
   const { dispatchFields, isValid, setBackgroundProcessing, setIsValid, setSubmitted } = useForm()
 
@@ -183,6 +186,8 @@ export const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc })
                 // We need to log the time in order to figure out if we need to trigger the state off later
                 endTimestamp = newDate.getTime()
 
+                const json = await res.json()
+
                 if (res.status === 200) {
                   setLastUpdateTime(newDate.getTime())
 
@@ -192,13 +197,20 @@ export const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc })
                     updatedAt: newDate.toISOString(),
                   })
 
+                  // if onSaveFromDocumentDrawer is defined, call it
+                  if (typeof onSaveFromDocumentDrawer === 'function') {
+                    void onSaveFromDocumentDrawer({
+                      ...json,
+                      operation: 'update',
+                    })
+                  }
+
                   if (!mostRecentVersionIsAutosaved) {
                     incrementVersionCount()
                     setMostRecentVersionIsAutosaved(true)
                     setUnpublishedVersionCount((prev) => prev + 1)
                   }
                 }
-                const json = await res.json()
 
                 if (versionsConfig?.drafts && versionsConfig?.drafts?.validate && json?.errors) {
                   if (Array.isArray(json.errors)) {

test/versions/e2e.spec.ts

@@ -175,6 +175,36 @@ describe('Versions', () => {
       }).toPass({ timeout: 10000, intervals: [100] })
     })
 
+    test('autosave relationships - should select doc after creating from relationship field', async () => {
+      await page.goto(postURL.create)
+      const autosaveRelationField = page.locator('#field-relationToAutosaves')
+      await expect(autosaveRelationField).toBeVisible()
+      const addNewButton = autosaveRelationField.locator(
+        '.relationship-add-new__add-button.doc-drawer__toggler',
+      )
+      await addNewButton.click()
+      const titleField = page.locator('#field-title')
+      const descriptionField = page.locator('#field-description')
+      await titleField.fill('test')
+      await descriptionField.fill('test')
+
+      const createdDate = await page.textContent(
+        'li:has(p:has-text("Created:")) .doc-controls__value',
+      )
+
+      // wait for modified date and created date to be different
+      await expect(async () => {
+        const modifiedDateLocator = page.locator(
+          'li:has(p:has-text("Last Modified:")) .doc-controls__value',
+        )
+        await expect(modifiedDateLocator).not.toHaveText(createdDate ?? '')
+      }).toPass({ timeout: POLL_TOPASS_TIMEOUT, intervals: [100] })
+
+      const closeDrawer = page.locator('.doc-drawer__header-close')
+      await closeDrawer.click()
+      const fieldValue = autosaveRelationField.locator('.value-container')
+      await expect(fieldValue).toContainText('test')
+    })
     test('should show collection versions view level action in collection versions view', async () => {
       await page.goto(url.list)
       await page.locator('tbody tr .cell-title a').first().click()