From cef4cbb0ee59e1b0b806808d79b402dce114755f Mon Sep 17 00:00:00 2001
From: Patrik <35232443+PatrikKozak@users.noreply.github.com>
Date: Thu, 9 Nov 2023 12:01:58 -0500
Subject: [PATCH] fix: conditionally hide dot menu in DocumentControls (#4075)

---
 .../components/elements/DocumentControls/index.tsx    | 11 ++++++++---
 test/access-control/e2e.spec.ts                       |  6 ++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/payload/src/admin/components/elements/DocumentControls/index.tsx b/packages/payload/src/admin/components/elements/DocumentControls/index.tsx
index 79a8765a4c..fdf2c20946 100644
--- a/packages/payload/src/admin/components/elements/DocumentControls/index.tsx
+++ b/packages/payload/src/admin/components/elements/DocumentControls/index.tsx
@@ -56,7 +56,12 @@ export const DocumentControls: React.FC<{
 
   const { i18n, t } = useTranslation('general')
 
-  const showDotMenu = Boolean(collection && id && !disableActions)
+  const hasCreatePermission = 'create' in permissions && permissions.create?.permission
+  const hasDeletePermission = 'delete' in permissions && permissions.delete?.permission
+
+  const showDotMenu = Boolean(
+    collection && id && !disableActions && (hasCreatePermission || hasDeletePermission),
+  )
 
   return (
     <Gutter className={baseClass}>
@@ -203,7 +208,7 @@ export const DocumentControls: React.FC<{
               verticalAlign="bottom"
             >
               <PopupList.ButtonGroup>
-                {'create' in permissions && permissions?.create?.permission && (
+                {hasCreatePermission && (
                   <React.Fragment>
                     <PopupList.Button
                       id="action-create"
@@ -217,7 +222,7 @@ export const DocumentControls: React.FC<{
                     )}
                   </React.Fragment>
                 )}
-                {'delete' in permissions && permissions?.delete?.permission && id && (
+                {hasDeletePermission && (
                   <DeleteDocument buttonId="action-delete" collection={collection} id={id} />
                 )}
               </PopupList.ButtonGroup>
diff --git a/test/access-control/e2e.spec.ts b/test/access-control/e2e.spec.ts
index 5b43293a75..df1d9ceec9 100644
--- a/test/access-control/e2e.spec.ts
+++ b/test/access-control/e2e.spec.ts
@@ -179,6 +179,12 @@ describe('access control', () => {
       await page.goto(readOnlyUrl.edit(existingDoc.id))
       await expect(page.locator('#field-name')).toBeDisabled()
     })
+
+    test('should not render dot menu popup when `create` and `delete` access control is set to false', async () => {
+      await page.goto(readOnlyUrl.edit(existingDoc.id))
+      await wait(1000)
+      await expect(page.locator('.collection-edit .doc-controls .doc-controls__popup')).toBeHidden()
+    })
   })
 
   describe('readVersions', () => {