fix(ui): invalid permissions passed to group and named tab sub-fields (#9366)

Fixes https://github.com/payloadcms/payload/issues/9363

This fixes the following issues that caused fields to be either hidden,
or incorrectly set to readOnly in certain configurations:
- In some cases, permissions were sanitized incorrectly. This PR
rewrites the sanitizePermissions function and adds new unit tests
- after a document save, the client was receiving unsanitized
permissions. Moving the sanitization logic to the endpoint fixes this
- Various incorrect handling of permissions in our form state endpoints
/ RenderFields

test/access-control/e2e.spec.ts

@@ -169,6 +169,132 @@ describe('access control', () => {
         }),
       ).toHaveCount(1)
     })
+
+    const ensureRegression1FieldsHaveCorrectAccess = async () => {
+      await expect(
+        page.locator('#field-group1 .rich-text-lexical .ContentEditable__root'),
+      ).toBeVisible()
+      // Wait until the contenteditable is editable
+      await expect(
+        page.locator('#field-group1 .rich-text-lexical .ContentEditable__root'),
+      ).toBeEditable()
+
+      await expect(async () => {
+        const isAttached = page.locator('#field-group1 .rich-text-lexical--read-only')
+        await expect(isAttached).toBeHidden()
+      }).toPass({ timeout: 10000, intervals: [100] })
+      await expect(page.locator('#field-group1 #field-group1__text')).toBeEnabled()
+
+      // Click on button with text Tab1
+      await page.locator('.tabs-field__tab-button').getByText('Tab1').click()
+
+      await expect(
+        page.locator('.tabs-field__tab .rich-text-lexical .ContentEditable__root').first(),
+      ).toBeVisible()
+      await expect(
+        page.locator('.tabs-field__tab .rich-text-lexical--read-only').first(),
+      ).not.toBeAttached()
+
+      await expect(
+        page.locator(
+          '.tabs-field__tab #field-tab1__blocks2 .rich-text-lexical .ContentEditable__root',
+        ),
+      ).toBeVisible()
+      await expect(
+        page.locator('.tabs-field__tab #field-tab1__blocks2 .rich-text-lexical--read-only'),
+      ).not.toBeAttached()
+
+      await expect(
+        page.locator('#field-array #array-row-0 .rich-text-lexical .ContentEditable__root'),
+      ).toBeVisible()
+      await expect(
+        page.locator('#field-array #array-row-0 .rich-text-lexical--read-only'),
+      ).not.toBeAttached()
+
+      await expect(
+        page.locator(
+          '#field-arrayWithAccessFalse #arrayWithAccessFalse-row-0 .rich-text-lexical .ContentEditable__root',
+        ),
+      ).toBeVisible()
+      await expect(
+        page.locator(
+          '#field-arrayWithAccessFalse #arrayWithAccessFalse-row-0 .rich-text-lexical--read-only',
+        ),
+      ).toBeVisible()
+
+      await expect(
+        page.locator('#field-blocks .rich-text-lexical .ContentEditable__root'),
+      ).toBeVisible()
+      await expect(page.locator('#field-blocks.rich-text-lexical--read-only')).not.toBeAttached()
+    }
+    /**
+     * This reproduces a bug where certain fields were incorrectly marked as read-only
+     */
+    // eslint-disable-next-line playwright/expect-expect
+    test('ensure complex collection config fields show up in correct read-only state', async () => {
+      const regression1URL = new AdminUrlUtil(serverURL, 'regression1')
+      await page.goto(regression1URL.list)
+      // Click on first card
+      await page.locator('.cell-id a').first().click()
+      // wait for url
+      await page.waitForURL(`**/collections/regression1/**`)
+
+      await ensureRegression1FieldsHaveCorrectAccess()
+
+      // Edit any field
+      await page.locator('#field-group1__text').fill('test!')
+      // Save the doc
+      await saveDocAndAssert(page)
+      await wait(1000)
+      // Ensure fields still have the correct readOnly state. When saving the document, permissions are re-evaluated
+      await ensureRegression1FieldsHaveCorrectAccess()
+    })
+
+    const ensureRegression2FieldsHaveCorrectAccess = async () => {
+      await expect(
+        page.locator('#field-group .rich-text-lexical .ContentEditable__root'),
+      ).toBeVisible()
+      // Wait until the contenteditable is editable
+      await expect(
+        page.locator('#field-group .rich-text-lexical .ContentEditable__root'),
+      ).toBeEditable()
+
+      await expect(async () => {
+        const isAttached = page.locator('#field-group .rich-text-lexical--read-only')
+        await expect(isAttached).toBeHidden()
+      }).toPass({ timeout: 10000, intervals: [100] })
+      await expect(page.locator('#field-group #field-group__text')).toBeEnabled()
+
+      await expect(
+        page.locator('#field-array #array-row-0 .rich-text-lexical .ContentEditable__root'),
+      ).toBeVisible()
+      await expect(
+        page.locator('#field-array #array-row-0 .rich-text-lexical--read-only'),
+      ).toBeVisible() // => is read-only
+    }
+
+    /**
+     * This reproduces a bug where certain fields were incorrectly marked as read-only
+     */
+    // eslint-disable-next-line playwright/expect-expect
+    test('ensure complex collection config fields show up in correct read-only state 2', async () => {
+      const regression2URL = new AdminUrlUtil(serverURL, 'regression2')
+      await page.goto(regression2URL.list)
+      // Click on first card
+      await page.locator('.cell-id a').first().click()
+      // wait for url
+      await page.waitForURL(`**/collections/regression2/**`)
+
+      await ensureRegression2FieldsHaveCorrectAccess()
+
+      // Edit any field
+      await page.locator('#field-group__text').fill('test!')
+      // Save the doc
+      await saveDocAndAssert(page)
+      await wait(1000)
+      // Ensure fields still have the correct readOnly state. When saving the document, permissions are re-evaluated
+      await ensureRegression2FieldsHaveCorrectAccess()
+    })
   })
 
   describe('collection — fully restricted', () => {