feat: enables document drawers from read-only fields (#1989)

test/fields-relationship/config.ts

@@ -110,6 +110,14 @@ export default buildConfig({
           type: 'text',
           name: 'filter',
         },
+        {
+          name: 'relationshipReadOnly',
+          type: 'relationship',
+          relationTo: relationOneSlug,
+          admin: {
+            readOnly: true,
+          },
+        },
       ],
     },
     {
@@ -245,7 +253,7 @@ export default buildConfig({
       },
     });
     // Create docs to relate to
-    const { id: relationOneDocId } = await payload.create<RelationOne>({
+    const { id: relationOneDocId } = await payload.create({
       collection: relationOneSlug,
       data: {
         name: relationOneSlug,
@@ -254,7 +262,7 @@ export default buildConfig({
 
     const relationOneIDs: string[] = [];
     await mapAsync([...Array(11)], async () => {
-      const doc = await payload.create<RelationOne>({
+      const doc = await payload.create({
         collection: relationOneSlug,
         data: {
           name: relationOneSlug,
@@ -265,7 +273,7 @@ export default buildConfig({
 
     const relationTwoIDs: string[] = [];
     await mapAsync([...Array(11)], async () => {
-      const doc = await payload.create<RelationTwo>({
+      const doc = await payload.create({
         collection: relationTwoSlug,
         data: {
           name: relationTwoSlug,
@@ -275,15 +283,17 @@ export default buildConfig({
     });
 
     // Existing relationships
-    const { id: restrictedDocId } = await payload.create<RelationRestricted>({
+    const { id: restrictedDocId } = await payload.create({
       collection: relationRestrictedSlug,
       data: {
         name: 'relation-restricted',
       },
     });
+
     const relationsWithTitle: string[] = [];
+
     await mapAsync(['relation-title', 'word boundary search'], async (title) => {
-      const { id } = await payload.create<RelationWithTitle>({
+      const { id } = await payload.create({
         collection: relationWithTitleSlug,
         data: {
           name: title,
@@ -291,7 +301,8 @@ export default buildConfig({
       });
       relationsWithTitle.push(id);
     });
-    await payload.create<FieldsRelationship>({
+
+    await payload.create({
       collection: slug,
       data: {
         relationship: relationOneDocId,
@@ -300,7 +311,7 @@ export default buildConfig({
       },
     });
     await mapAsync([...Array(11)], async () => {
-      await payload.create<FieldsRelationship>({
+      await payload.create({
         collection: slug,
         data: {
           relationship: relationOneDocId,
@@ -312,16 +323,18 @@ export default buildConfig({
         },
       });
     });
+
     await mapAsync([...Array(15)], async () => {
       const relationOneID = relationOneIDs[Math.floor(Math.random() * 10)];
       const relationTwoID = relationTwoIDs[Math.floor(Math.random() * 10)];
-      await payload.create<FieldsRelationship>({
+      await payload.create({
         collection: slug,
         data: {
           relationship: relationOneDocId,
           relationshipRestricted: restrictedDocId,
           relationshipHasMany: [relationOneID],
           relationshipHasManyMultiple: [{ relationTo: relationTwoSlug, value: relationTwoID }],
+          relationshipReadOnly: relationOneID,
         },
       });
     });

test/fields-relationship/e2e.spec.ts

@@ -46,21 +46,21 @@ describe('fields - relationship', () => {
     await clearAllDocs();
 
     // Create docs to relate to
-    relationOneDoc = await payload.create<RelationOne>({
+    relationOneDoc = await payload.create({
       collection: relationOneSlug,
       data: {
         name: 'relation',
       },
     });
 
-    anotherRelationOneDoc = await payload.create<RelationOne>({
+    anotherRelationOneDoc = await payload.create({
       collection: relationOneSlug,
       data: {
         name: 'relation',
       },
     });
 
-    relationTwoDoc = await payload.create<RelationTwo>({
+    relationTwoDoc = await payload.create({
       collection: relationTwoSlug,
       data: {
         name: 'second-relation',
@@ -68,7 +68,7 @@ describe('fields - relationship', () => {
     });
 
     // Create restricted doc
-    restrictedRelation = await payload.create<RelationRestricted>({
+    restrictedRelation = await payload.create({
       collection: relationRestrictedSlug,
       data: {
         name: 'restricted',
@@ -76,7 +76,7 @@ describe('fields - relationship', () => {
     });
 
     // Doc with useAsTitle
-    relationWithTitle = await payload.create<RelationWithTitle>({
+    relationWithTitle = await payload.create({
       collection: relationWithTitleSlug,
       data: {
         name: 'relation-title',
@@ -84,7 +84,7 @@ describe('fields - relationship', () => {
     });
 
     // Doc with useAsTitle for word boundary test
-    await payload.create<RelationWithTitle>({
+    await payload.create({
       collection: relationWithTitleSlug,
       data: {
         name: 'word boundary search',
@@ -92,13 +92,14 @@ describe('fields - relationship', () => {
     });
 
     // Add restricted doc as relation
-    docWithExistingRelations = await payload.create<CollectionWithRelationships>({
+    docWithExistingRelations = await payload.create({
       collection: slug,
       data: {
         name: 'with-existing-relations',
         relationship: relationOneDoc.id,
         relationshipRestricted: restrictedRelation.id,
         relationshipWithTitle: relationWithTitle.id,
+        relationshipReadOnly: relationOneDoc.id,
       },
     });
   });
@@ -216,13 +217,13 @@ describe('fields - relationship', () => {
   });
 
   test('should allow usage of relationTo in filterOptions', async () => {
-    const { id: include } = await payload.create<RelationOne>({
+    const { id: include } = await payload.create({
       collection: relationOneSlug,
       data: {
         name: 'include',
       },
     });
-    const { id: exclude } = await payload.create<RelationOne>({
+    const { id: exclude } = await payload.create({
       collection: relationOneSlug,
       data: {
         name: 'exclude',
@@ -240,7 +241,7 @@ describe('fields - relationship', () => {
   });
 
   test('should allow usage of siblingData in filterOptions', async () => {
-    await payload.create<RelationOne>({
+    await payload.create({
       collection: relationWithTitleSlug,
       data: {
         name: 'exclude',
@@ -259,6 +260,18 @@ describe('fields - relationship', () => {
     await expect(options).not.toContainText('exclude');
   });
 
+  test('should open document drawer from read-only relationships', async () => {
+    await page.goto(url.edit(docWithExistingRelations.id));
+
+    const field = page.locator('#field-relationshipReadOnly');
+
+    const button = await field.locator('button.relationship--single-value__drawer-toggler.doc-drawer__toggler');
+    await button.click();
+
+    const documentDrawer = await page.locator('[id^=doc-drawer_relation-one_1_]');
+    await expect(documentDrawer).toBeVisible();
+  });
+
   describe('existing relationships', () => {
     test('should highlight existing relationship', async () => {
       await page.goto(url.edit(docWithExistingRelations.id));

test/fields/collections/RichText/index.ts

@@ -100,6 +100,20 @@ const RichTextFields: CollectionConfig = {
       type: 'richText',
       admin: {
         readOnly: true,
+        elements: [
+          'h1',
+          'h2',
+          'h3',
+          'h4',
+          'h5',
+          'h6',
+          'ul',
+          'ol',
+          'indent',
+          'link',
+          'relationship',
+          'upload',
+        ],
         link: {
           fields: [
             {

test/fields/config.ts

@@ -110,6 +110,7 @@ export default buildConfig({
 
     const richTextRelationshipIndex = richTextDocWithRelationship.richText.findIndex(({ type }) => type === 'relationship');
     richTextDocWithRelationship.richText[richTextRelationshipIndex].value = { id: createdTextDoc.id };
+    richTextDocWithRelationship.richTextReadOnly[richTextRelationshipIndex].value = { id: createdTextDoc.id };
 
     const richTextUploadIndex = richTextDocWithRelationship.richText.findIndex(({ type }) => type === 'upload');
     richTextDocWithRelationship.richText[richTextUploadIndex].value = { id: createdJPGDoc.id };

test/fields/e2e.spec.ts

@@ -452,6 +452,28 @@ describe('fields', () => {
         await expect(editLinkModal).toBeHidden();
       });
 
+      test('should open uploads drawer from read-only field', async () => {
+        navigateToRichTextFields();
+        const field = await page.locator('#field-richTextReadOnly');
+        const button = await field.locator('button.rich-text-upload__doc-drawer-toggler.doc-drawer__toggler');
+
+        await button.click();
+
+        const documentDrawer = await page.locator('[id^=doc-drawer_uploads_1_]');
+        await expect(documentDrawer).toBeVisible();
+      });
+
+      test('should open relationship drawer from read-only field', async () => {
+        navigateToRichTextFields();
+        const field = await page.locator('#field-richTextReadOnly');
+        const button = await field.locator('button.rich-text-relationship__doc-drawer-toggler.doc-drawer__toggler');
+
+        await button.click();
+
+        const documentDrawer = await page.locator('[id^=doc-drawer_text-fields_1_]');
+        await expect(documentDrawer).toBeVisible();
+      });
+
       test('should populate new links', async () => {
         navigateToRichTextFields();