feat: add support for hotkeys (#1821)

Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>
Co-authored-by: Alessio Gravili <70709113+AlessioGr@users.noreply.github.com>
Co-authored-by: Alessio Gravili <alessio@gravili.de>
Co-authored-by: Jessica Boezwinkle <jessica@trbl.design>

test/admin/e2e.spec.ts

@@ -3,7 +3,7 @@ import { expect, test } from '@playwright/test';
 import payload from '../../src';
 import { AdminUrlUtil } from '../helpers/adminUrlUtil';
 import { initPayloadE2E } from '../helpers/configHelpers';
-import { saveDocAndAssert } from '../helpers';
+import { saveDocAndAssert, saveDocHotkeyAndAssert } from '../helpers';
 import type { Post } from './config';
 import { globalSlug, slug } from './shared';
 import { mapAsync } from '../../src/utilities/mapAsync';
@@ -168,6 +168,18 @@ describe('admin', () => {
       await expect(page.locator('#field-description')).toHaveValue(newDesc);
     });
 
+    test('should save using hotkey', async () => {
+      const { id } = await createPost();
+      await page.goto(url.edit(id));
+
+      const newTitle = 'new title';
+      await page.locator('#field-title').fill(newTitle);
+
+      await saveDocHotkeyAndAssert(page);
+
+      await expect(page.locator('#field-title')).toHaveValue(newTitle);
+    });
+
     test('should delete existing', async () => {
       const { id, ...post } = await createPost();
 

test/fields/e2e.spec.ts

@@ -4,17 +4,18 @@ import path from 'path';
 import payload from '../../src';
 import { AdminUrlUtil } from '../helpers/adminUrlUtil';
 import { initPayloadE2E } from '../helpers/configHelpers';
-import { saveDocAndAssert } from '../helpers';
-import { textDoc } from './collections/Text';
-import { arrayFieldsSlug } from './collections/Array';
+import { saveDocAndAssert, saveDocHotkeyAndAssert } from '../helpers';
+import { textDoc, textFieldsSlug } from './collections/Text';
 import { pointFieldsSlug } from './collections/Point';
 import { tabsSlug } from './collections/Tabs';
 import { collapsibleFieldsSlug } from './collections/Collapsible';
 import wait from '../../src/utilities/wait';
 import { jsonDoc } from './collections/JSON';
 import { numberDoc } from './collections/Number';
+import { relationshipFieldsSlug } from './collections/Relationship';
+import { mapAsync } from '../../src/utilities/mapAsync';
 
-const { beforeAll, describe } = test;
+const { afterEach, beforeAll, describe } = test;
 
 let page: Page;
 let serverURL;
@@ -934,10 +935,20 @@ describe('fields', () => {
   describe('relationship', () => {
     let url: AdminUrlUtil;
 
-    beforeAll(() => {
+    beforeAll(async () => {
       url = new AdminUrlUtil(serverURL, 'relationship-fields');
     });
 
+
+    afterEach(async () => {
+      // delete all existing relationship documents
+      const allRelationshipDocs = await payload.find({ collection: relationshipFieldsSlug, limit: 100 });
+      const relationshipIDs = allRelationshipDocs.docs.map((doc) => doc.id);
+      await mapAsync(relationshipIDs, async (id) => {
+        await payload.delete({ collection: relationshipFieldsSlug, id });
+      });
+    });
+
     test('should create inline relationship within field with many relations', async () => {
       await page.goto(url.create);
 
@@ -1085,6 +1096,45 @@ describe('fields', () => {
       // check if the value is saved
       await expect(page.locator('#field-relationshipHasMany .relationship--multi-value-label__text')).toHaveText(`${value}123456`);
     });
+
+    // Drawers opened through the edit button are prone to issues due to the use of stopPropagation for certain
+    // events - specifically for drawers opened through the edit button. This test is to ensure that drawers
+    // opened through the edit button can be saved using the hotkey.
+    test('should save using hotkey in edit document drawer', async () => {
+      await page.goto(url.create);
+
+      // First fill out the relationship field, as it's required
+      await page.locator('#relationship-add-new .relationship-add-new__add-button').click();
+      await page.locator('#field-relationship .value-container').click();
+      // Select "Seeded text document" relationship
+      await page.getByText('Seeded text document', { exact: true }).click();
+
+      // Click edit button which opens drawer
+      await page.getByRole('button', { name: 'Edit Seeded text document' }).click();
+
+      // Fill 'text' field of 'Seeded text document'
+      await page.locator('#field-text').fill('some updated text value');
+
+      // Save drawer (not parent page) with hotkey
+      await saveDocHotkeyAndAssert(page);
+
+      const seededTextDocument = await payload.find({
+        collection: textFieldsSlug,
+        where: {
+          text: {
+            equals: 'some updated text value',
+          },
+        },
+      });
+      const relationshipDocuments = await payload.find({
+        collection: relationshipFieldsSlug,
+      });
+
+      // The Seeded text document should now have a text field with value 'some updated text value',
+      expect(seededTextDocument.docs.length).toEqual(1);
+      // but the relationship document should NOT exist, as the hotkey should have saved the drawer and not the parent page
+      expect(relationshipDocuments.docs.length).toEqual(0);
+    });
   });
 
   describe('upload', () => {

test/helpers.ts

@@ -36,6 +36,18 @@ export async function login(args: LoginArgs): Promise<void> {
   await page.waitForURL(`${serverURL}/admin`);
 }
 
+export async function saveDocHotkeyAndAssert(page: Page): Promise<void> {
+  const ua = page.evaluate(() => navigator.userAgent);
+  const isMac = (await ua).includes('Mac OS X');
+  if (isMac) {
+    await page.keyboard.down('Meta');
+  } else {
+    await page.keyboard.down('Control');
+  }
+  await page.keyboard.down('s');
+  await expect(page.locator('.Toastify')).toContainText('successfully');
+}
+
 export async function saveDocAndAssert(page: Page, selector = '#action-save'): Promise<void> {
   await page.click(selector, { delay: 100 });
   await expect(page.locator('.Toastify')).toContainText('successfully');